Problem loading third-party stuff

jhhammer commented 4 years ago

I pasted the lines:

import VJsf from '@koumoul/vjsf'
import '@koumoul/vjsf/dist/main.css'
// load third-party dependencies (markdown-it, vuedraggable)
// you can also load them separately based on your needs
import '@koumoul/vjsf/dist/third-party.js'

into my main.js file above

new Vue({
    router,
    store,
    vuetify,
    render: h => h(App)
}).$mount('#app');

Then I get the following error:

third-party.js?c5a8:1 Uncaught ReferenceError: Vue is not defined
    at Object.eval (third-party.js?c5a8:1)
    at r (third-party.js?c5a8:1)
    at Module.eval (third-party.js?c5a8:1)
    at Module.eval (third-party.js?c5a8:1)
    at r (third-party.js?c5a8:1)
    at eval (third-party.js?c5a8:1)
    at eval (third-party.js?c5a8:1)
    at Object../node_modules/@koumoul/vjsf/dist/third-party.js (chunk-vendors.js:152)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)

What am I doing wrong?

jhhammer commented 4 years ago

I now changed it to:

import VJsf from '@koumoul/vjsf';
import '@koumoul/vjsf/dist/main.css';
// load third-party dependencies (markdown-it, vuedraggable)
// you can also load them separately based on your needs
//import '@koumoul/vjsf/dist/third-party.js'
import Draggable from 'vuedraggable'
const _global = (typeof window !== 'undefined' && window) || (typeof global !== 'undefined' && global) || {}
_global.markdownit = require('markdown-it')

and added to

Vue.component('VJsf', VJsf);

an

Vue.component('draggable', Draggable)

By that, I am able to use the editable array. May be there is some information missing in https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/getting-started on where exactly to put the global registration of the VJsf component?

albanm commented 4 years ago

I don't know. I am pretty sure the code in the documentation works, I use it in some projects. But these import stuff are quite sensible to your project's build system. I will try to look more closely into it sometimes soon.

ai-nikolai commented 1 year ago

Issue still persists: @albanm @jhhammer

References:

Package.json

dependencies: {
    "vuetify": "^2.6.0",
    "@koumoul/vjsf": "^2.21.3",
},

main.js

/** register vuetify plugin globally **/
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
const vuetify= new Vuetify(opts)
/****/

// VJSF
import VJsf from '@koumoul/vjsf'
import '@koumoul/vjsf/dist/main.css'
// load third-party dependencies (markdown-it, vuedraggable)
// you can also load them separately based on your needs
// import '@koumoul/vjsf/dist/third-party.js'
Vue.component('VJsf', VJsf)

Build using vue-cli.

Problem:

If importing third-party.js then we get the error: Uncaught ReferenceError: Vue is not defined
If not importing third-party.js then we get loads of the [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in`

koumoul-dev / vuetify-jsonschema-form