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

user_339803 0
Viewed 2338

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.

vuejs3 vue.js webpack
1 Answers

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

user_3398030
Related