Vue-next: currentinstance value is null for the bundled component

Created on 4 Jul 2020  路  4Comments  路  Source: vuejs/vue-next

Version

3.0.0-beta.18

Reproduction link

https://github.com/anandkumarram/vue3lib

https://github.com/anandkumarram/vue3App

Steps to reproduce

1) in vue3lib -> run : npm run build:es -> it will generate vue3lig.esm.js (bundled using rollup-plugin-vue)
rollup.config.js : vue3lib\build\rollup.config.js

vue3lig.esm.js : vue3lib\dist\vue3lib.esm.js

2) in vue3App -> run : npm install --save ../vue3Lib && npm run serve.
I have used the vue3lib as a plugin in vue3App and used a component name "sample".

What is expected?

All Components loaded from bundle(vue3lib.esm.js) should have componentinstance value

What is actually happening?

1) currentinstance value is null in the Closure object.

2) runtime-core.esm-bundler.js?821d:36 [Vue warn]: onMounted is called when there is no active component instance to be associated with.
Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(),
make sure to register lifecycle hooks before the first await statement.

attached few debugged images for reference.

warning

Capture

Most helpful comment

This is not a Vue's bug, the cause of the problem is that vue3lib installed vue itself and resolve the path to it, and vue3App also installed another vue and resolve the path to it. The currentInstance in these two Vue is not shared,
Just add the alias configuration in your vue3App/vue.config.js:

config.resolve.alias.set('vue$', resolve(__dirname, 'node_modules/vue'))

All 4 comments

This is not a Vue's bug, the cause of the problem is that vue3lib installed vue itself and resolve the path to it, and vue3App also installed another vue and resolve the path to it. The currentInstance in these two Vue is not shared,
Just add the alias configuration in your vue3App/vue.config.js:

config.resolve.alias.set('vue$', resolve(__dirname, 'node_modules/vue'))

vue3lib shouldn't have vue listed as a dependency if vue is externalized - it should be a peer dependency.

I took another look and this is because you are building it locally with linked Vue in the dependency tree, so webpack resolves vue for vue3lib based on its location. This will not happen in production if you list vue in vue3lib as a peer dep. The solution for your local development is what @HcySunYang suggested: use an alias to force webpack to use the same copy of Vue.

@HcySunYang @yyx990803 it's working now.. thanks for the suggestion..

Was this page helpful?
0 / 5 - 0 ratings