Comments (8)
Ok so the problem is that the compiled .js file in dist
already includes Trix and it conflicts with the Trix library that we import in the theme. A quick workaround is to import @laraform/laraform/src
instead of @larafom/laraform
until the fix is released.
from laraform.
Extending essentials, like the default theme does, seems to work ok.
import defaultTheme from '@laraform/laraform/src/themes/default/essentials'
export default utils.extendTheme(defaultTheme, {
...
from laraform.
It seems like you are including trix multiple times:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "trix-toolbar" has already been used with this registry
The reason why essentials does not throw error is because Trix is not among essential elements.
I'd recommend double checking that you are not including Trix anywhere else in your project.
from laraform.
I have the same problem.
There is something with the extending the theme that loads trix twice.
If I remove the custom theme I get no errors.
resources/laraform/theme/index.js
import extendTheme from '@laraform/laraform/src/utils'
import defaultTheme from '@laraform/laraform/src/themes/default'
import TextElement from './components/elements/TextElement.vue'
export default extendTheme(defaultTheme, {
classes: {},
elements: {
TextElement
},
components: {},
layouts: {},
grid: {},
})
app.js
import Vue from 'vue'
import Laraform from '@laraform/laraform' // <- Premimum package
import QuasarTheme from '../laraform/theme'
Laraform.theme('quasar-theme', QuasarTheme)
Laraform.config({
theme: 'quasar-theme',
endpoints: {
process: '/laraform/process',
// Only required for full version
elements: {
trix: {
attachment: '/laraform/trix-attachment'
}
},
validators: {
active_url: '/laraform/validator/active_url',
exists: '/laraform/validator/exists',
unique: '/laraform/validator/unique',
},
}
})
Vue.use(Laraform)
TextElement.vue
<template>
<div class="my-text-element">
<label
:for="name"
>{{ label }}</label>
<input
v-model="model"
:type="inputType"
/>
</div>
</template>
<script>
import TextElement from '@laraform/laraform/src/components/elements/TextElement'
export default {
mixins: [TextElement]
}
</script>
Error:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "trix-toolbar" has already been used with this registry
from laraform.
I'm not including Trix anywhere or using it anywhere.
from laraform.
Me neither.
from laraform.
Importing src seems to work.
Note that you had a typo there @Laraform/laraform/src that just tripped me up ;-) Maybe document this somewhere? @laraform
from laraform.
Thanks @mike2410, I've updated the comment as well as the docs.
from laraform.
Related Issues (20)
- [BUG] validation rule "before" and "before_or_equal" for date elements not working as expected HOT 2
- [QUESTION] is Possible to Drag n Drop component like google form? HOT 3
- [BUG] validation is not running on "onInput" event for TextElement (inputType="number") HOT 2
- [QUESTION] Planned support for Tailwind CSS? HOT 4
- [QUESTION] Does full version comes with uncompress version of JS code ? HOT 4
- [BUG] Trouble initiating laraform with laravel-pug (pugjs) HOT 4
- Support !!! [BUG] HOT 5
- [BUG] storing files in related model using AutoProcess and Wizard HOT 2
- [QUESTION] Custom schema for edit HOT 3
- [QUESTION] Hide Radio Group items HOT 2
- [BUG] PHP 8.1: HasMany::hasKey throws error HOT 6
- [BUG] PHP8.1/L9: HasMany::update fails if model has appended attributes HOT 4
- [BUG] AlgoliaSearchError HOT 4
- [BUG] Regexp mask for text inputs from backend HOT 4
- Maintenance Mode / Laraform Future / Vue.js 3 HOT 2
- Client-Side Storage HOT 2
- [BUG] Class "Route" not found (Laravel)
- [BUG] Form not showing after install HOT 4
- [QUESTION] Ignore data on submit HOT 2
- [BUG] Remove items from list not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from laraform.