Programmatically created Vue component missing global properties defined on Vue.prototype

Question

I have an issue when creating an instance of a vue component imported from a bundled rollup library, I add a global property to the root Vue instance using Vue.prototype and it is shared across all of my components, However when i create a new instance using the Vue.extend method, the newly created component has none of the prototype properties or globals they all simply return undefined.



//Main.js
Vue.prototype.$example = 'Hello there!';

//////////////////////////////

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


//App.vue
import { MyDynamicComponent } from 'my-bundled-rollup-library';
export default {
    created() {

        var DynamicComponent = Vue.extend(MyDynamicComponent);

        console.log(this.$example) //Returns 'Hello there!' (correct)
        var instance = new DynamicComponent({
            propsData: {
                hello:'world',
            },
        })

        ///////////////////////////////////////////

        console.log(instance.$example) //Returns undefined (does not have the property)
    }
}

And here is an example of the component before it's bundled

//MyDynamicComponent.vue
const MyDynamicComponent = {
     props:{
          hello:{
               type:String
          }
     },
     created() {
          console.log(this.$example) //undefined
     }
}

export default component
export { MyDynamicComponent as MyDynamicComponent }

My first thought is that somehow the component is using a different Vue instance than the one of Vue.extend

This usually means that vue in my-bundled-rollup-library isn't the same as vue in Main.js . This is very specific to you setup which wasn't shown. Steps to solve this: 1. Make sure vue isn't bundled with my-bundled-rollup-library . 2. Make sure vue dep constraints are as loose as possible, should be peerDependencies or * in dependencies. 3. Dedupe packages with npm dedupe, if this doesn't help then delete and reinstall node_modules. Let me know if this helps. If this doesn't, please, provide a way to reproduce the problem. — Estus Flask
– Estus Flask, Commented Apr 26, 2020 at 14:52
@EstusFlask THANK YOU! Sometimes the simplest suggestions help find the answer. I had already set vue as a peerDependency, and listed as an external. However (i should know this by now) i removed the node_modules folder and reinstalled and rebuilt again and then was able to find the issue in the rollup.config file. — Cade Embery
– Cade Embery, Commented Apr 26, 2020 at 18:36

Philip · Accepted Answer · 2020-04-26 14:38:47Z

I've recreated the whole app and it works for me. I transpiled the component with rollup and imported it inside an app generated with the vue CLI.

The only thing that puzzles me is why you didn't import the component as default?

import { MyDynamicComponent } from 'my-bundled-rollup-library';
// to
import MyDynamicComponent from 'my-bundled-rollup-library';

You export it as default, so you have to import it as default.

Info This is the part inside vue which creates the new "sub" prototype object with the "super" prototype https://github.com/vuejs/vue/blob/dev/src/core/global-api/extend.js#L36

rollup.config.js

import vue from 'rollup-plugin-vue'

export default {
  input: 'component.vue',
  output: {
    format: 'esm',
    file: 'dist/MyComponent.js'
  },
  plugins: [
    vue()
  ]
}

dist/MyComponent.js

This is the generated file from MyComponent.vue

import { openBlock, createBlock } from 'vue';

//
//
//

var script = {
  props: {
    hello: {
      type: String,
    },
  },
  created() {
    console.warn('MY_COMPONENT', this.$example); // should work
  },
};

function render(_ctx, _cache) {
  return (openBlock(), createBlock("div", null, "hoi"))
}

script.render = render;
script.__file = "component.vue";

export default script;

App.vue (script tag)

import Vue from 'vue';
import MyComponent from './dist/MyComponent'; // throws some warnings, but this is not relevant for this post

export default {
  name: 'App',
  created() {
    const DynamicComponent = Vue.extend(MyComponent);

    const instance = new DynamicComponent({
      propsData: {
        hello: 'world',
      },
    });

    console.log('instance', instance.$example);
  },
};

Yeah sorry, it is part of a 120 piece component library, i wrote the example as best i could but should have made written it as a named export.

Cade Embery · Accepted Answer · 2020-04-26 18:48:39Z

After rm -rf node_modules and reinstalling and trying to recompile my library with rollup again, roll up threw an error that it was not throwing before over an alias to use the Vue runtime+compiler package.

[!] Error: Cannot find module 'vue/dist/vue.esm.js'

My rollup.config file had


import vue from 'rollup-plugin-vue';

import alias from '@rollup/plugin-alias';

export default {
    plugins: {
        alias({
            entries: [
                //Removing this line fixed the problem
                //{ find: 'vue', replacement: require.resolve('vue/dist/vue.esm.js') },
            ],
        }),
        vue,
    }
}

So the lesson learned is, when things are being strange, rm -rf node_modules and rebuild everything again.

Collectives™ on Stack Overflow

Programmatically created Vue component missing global properties defined on Vue.prototype

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related