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

Bonjour,

Je suis vraiment nouveau sur vue et webpack. J’ai un soucis avec l’utilisation de vue-loader.

J’ai créé un projet avec vue create myproject.

fichier package.json

{
  "name": "recipe_vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "webpack",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "file-loader": "^6.2.0",
    "vue-loader": "^16.8.1",
    "webpack": "^5.58.2",
    "webpack-bundle-tracker": "^0.4.3",
    "webpack-cli": "^4.9.1",
    "write-file-webpack-plugin": "^4.5.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

fichier webpack.config.json

var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var WriteFilePlugin = require('write-file-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    context: __dirname,
    mode: "development",
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new BundleTracker({
            path: __dirname,
            filename: './webpack-stats.json',
        }),
        new WriteFilePlugin(),
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                include: /src/,
                use: 'vue-loader',
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: 'file-loader'
            },
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    }
}

Et mon problème, c’est que l’exécution de npm run build me donne l’erreur suivante:

npm run build --stats-error-details

> recipe_vue@0.1.0 build /home/emonier/ownCloud/recipes
> webpack

assets by status 6.69 KiB [cached] 1 asset
asset bundle.js 51.8 KiB [compared for emit] (name: main)
runtime modules 2.04 KiB 6 modules
modules by path ./src/ 11.1 KiB
  modules by path ./src/*.vue 4.34 KiB 8 modules
  modules by path ./src/components/*.vue 6.61 KiB 8 modules
  ./src/main.js 90 bytes [built] [code generated]
  ./src/assets/logo.png 80 bytes [built] [code generated]
modules by path ./node_modules/ 9.44 KiB
  modules by path ./node_modules/vue-style-loader/lib/*.js 6.71 KiB
    ./node_modules/vue-style-loader/lib/addStylesClient.js 6.09 KiB [built] [code generated]
    ./node_modules/vue-style-loader/lib/listToStyles.js 637 bytes [built] [code generated]
  ./node_modules/vue-loader/dist/exportHelper.js 281 bytes [built] [code generated]
  ./node_modules/css-loader/dist/runtime/api.js 2.46 KiB [built] [code generated]

ERROR in ./src/App.vue?vue&type=template&id=7ba5bd90 (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[1]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/App.vue?vue&type=template&id=7ba5bd90) 1:0-222
Module not found: Error: Can't resolve 'vue' in '/home/emonier/ownCloud/recipes/src'
 @ ./src/App.vue?vue&type=template&id=7ba5bd90 1:0-197 1:0-197
 @ ./src/App.vue 1:0-64 8:68-74
 @ ./src/main.js 2:0-27 4:10-13

ERROR in ./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[1]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true) 1:0-302
Module not found: Error: Can't resolve 'vue' in '/home/emonier/ownCloud/recipes/src/components'
 @ ./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true 1:0-222 1:0-222
 @ ./src/components/HelloWorld.vue 1:0-83 8:68-74
 @ ./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/App.vue?vue&type=script&lang=js 2:0-52 7:4-14
 @ ./src/App.vue?vue&type=script&lang=js 1:0-131 1:0-131 1:132-252 1:132-252
 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 8:49-55
 @ ./src/main.js 2:0-27 4:10-13

ERROR in ./src/main.js 1:0-31
Module not found: Error: Can't resolve 'vue' in '/home/emonier/ownCloud/recipes/src'

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.58.2 compiled with 3 errors in 369 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! recipe_vue@0.1.0 build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the recipe_vue@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

C’est comme si le pluggin vue-loader ne fonctionnait pas, mais je ne comprend pas pourquoi.

Avez-vous une idée ?

Merci pour votre aide.

Bonjour @emonier et bienvenue sur le forum!

Pardonnez mon français, je connais juste un peu, mais je peux aider ici sur le forum et apprendre plus de français aussi. Avec l’aide de Google Translate. :slight_smile:

La vue CLI utilise déjà webpack, vous n’avez donc pas besoin de l’installer ou de la configurer manuellement. Cela signifie que vous ne devriez pas avois ces dépendences supplémentaires dans votre fichier package.json:

    "file-loader": "^6.2.0",
    "vue-loader": "^16.8.1",
    "webpack": "^5.58.2",
    "webpack-bundle-tracker": "^0.4.3",
    "webpack-cli": "^4.9.1",
    "write-file-webpack-plugin": "^4.5.1"

Ces dépendances semblent être la cause de l’erreur.

Si vous souhaitez configurer webpack, vous pouvez ajouter un fichier vue.config.js avec la configuration webpack supplémentair.

vue.config.js:

module.exports = {
  configureWebpack: {
    // Configuration de webpack supplémentaire
  },
};

J’espère que ça aide!