After upgrading to Vue 3, and updating Vue instantiation to createApp, webpack build fails with Module not found: Error: Can't resolve 'vue'

Question

After doing all the required upgrading to Vue 3, I can't get away from the very unhelpful error message during webpack build of:

Module not found: Error: Can't resolve 'vue'

I updated to the latest Vue version (3.0.4) in package.json
I updated all the other packages including vue-loader (16.1.1), and going from vue-template-compile to @vue/compiler-sfc (3.0.4)
I changed the main.js initialization code to import { createApp } from 'vue'; and createApp( App ).mount( '#app' );
I have removed node_modules and re-run npm install, so 'vue' is definately there.
I even dumbed down all the Vue components to literally just have nothing but html in them.

Why is it still saying it cannnot find 'vue'. Most google searches result in suggestions regarding laravel, but I dont use that.

@BoussadjraBrahim thanks but not sure how that addresses my problem, as it seems related to vue-template-compile which I have already replaced with @vue/compiler-sfc. Thanks though. Might be useful for others as a vue3 upgrade changes multiple things. — redfox05
– redfox05, Commented Dec 11, 2020 at 16:05
Check this tutorial for Vue v3 setup without vue-cli: frontendguruji.com/blog/… — Mandeep Pasbola
– Mandeep Pasbola, Commented Jan 2, 2022 at 8:38

redfox05 · Accepted Answer · 2020-12-11 16:06:42Z

23

After lots of research, figured out you might want to check the webpack config alias's section, as the Vue build references within the vue package have changed between Vue2 and Vue3.

If you have the following alias set pointing to the Vue runtime, you need to update it.

Old:

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.runtime.esm.js',
    }
}

Change to:

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
    }
}

More info can be found on the Vue 3 docs

edited Dec 11, 2020 at 16:06

answered Dec 11, 2020 at 15:23

redfox05

3,7421 gold badge37 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

trusktr Over a year ago

Thanks. Webpack alias needed an update when upgrading fro Vue 2 to Vue 3.

Collectives™ on Stack Overflow

After upgrading to Vue 3, and updating Vue instantiation to createApp, webpack build fails with Module not found: Error: Can't resolve 'vue'

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related