1

My webpack dev server which need to launch electron app generate this error :

Cannot find module 'vue-loader/lib/loaders/pitcher'

I installed the next version of vue-loader because I'm in vueJS3 project with :

npm install --save-dev vue-loader@next

and

npm install --save-dev @vue/compiler-sfc

This is my webpack config :

import path                         from 'path'
import webpack                      from 'webpack'
import VueLoaderPlugin              from 'vue-loader-plugin'
import HTMLWebpackPlugin            from 'html-webpack-plugin'
import url                          from "url"
import nodeExternals                from 'webpack-node-externals'

const __filename        = url.fileURLToPath(import.meta.url)
const __dirname         = path.dirname(__filename)
const buildDir          = path.join(__dirname, '..', 'build')
const indexHTMLFile     = path.join(__dirname, '..', 'src', 'renderer', 'index.html')
const mainEntryFile     = path.join(__dirname, '..', 'src', 'main', 'main.js')
const rendererEntryFile = path.join(__dirname, '..', 'src', 'renderer', 'renderer.js')

let webpackConfig =
{
    entry: {
        main: mainEntryFile,
        app: rendererEntryFile
    },

    output: {
        path: buildDir,
        filename: 'main-[name].js'
    },

    mode: "development",
    devtool: 'eval',
    target: 'electron-renderer',
    externals: [nodeExternals()],
    // stats: 'errors-only',

    node: {
        __dirname: false,
        __filename: false
    },

    resolve: {
        alias: {
            // this isn't technically needed, since the default `vue` entry for bundlers
            // is a simple `export * from '@vue/runtime-dom`. However having this
            // extra re-export somehow causes webpack to always invalidate the module
            // on the first HMR update and causes the page to reload.
            vue: "@vue/runtime-dom"
            // env: path.resolve(__dirname, `./env_${envName(env)}.json`)
        },
        extensions: ['.ts', '.js', '.json'],
    },

    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        },
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        },
        {
            test: /.vue$/,
            loader: 'vue-loader'
        },
        {
            test: /\.css$/,
            use: [
                'vue-style-loader',
                'css-loader'
            ]
        }]
    },

    plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new VueLoaderPlugin(),
            new HTMLWebpackPlugin({
                showErrors: true,
                cache: true,
                template: indexHTMLFile
            })
        ]
}

export default webpackConfig

My package.json file is :

   {
  "name": "electron-vue-template",
  "version": "0.1.0",
  "description": "A minimal Electron + Vue application",
  "private": true,
  "main": "./src/main/main.js",
  "type": "module",

  "scripts": {
    "test": "electron .",
    "vite:dev": "node scripts/dev-server-vite.js",
    "webpack:dev": "set NODE_ENV=development && node scripts/dev-server-webpack.js",
    "build": "node scripts/build-vue.js && electron-builder -c config/electron-builder.json",
    "build:win": "node scripts/build-vue.js && electron-builder -c config/electron-builder.json --win",
    "build:mac": "node scripts/build-vue.js && electron-builder -c config/electron-builder.json --mac",
    "build:linux": "node scripts/build-vue.js && electron-builder -c config/electron-builder.json --linux"
  },

  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@types/node": "^17.0.8",
    "@vitejs/plugin-vue": "^2.0.1",
    "@vue/cli": "^4.5.15",
    "@vue/compiler-sfc": "^3.2.26",
    "babel-loader": "^8.2.3",
    "chalk": "^4.1.2",
    "chokidar": "^3.5.2",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.5.1",
    "electron": "^16.0.6",
    "electron-builder": "^22.14.5",
    "electron-devtools-installer": "^3.2.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.5.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "vite": "^2.7.10",
    "vue-loader": "^17.0.0",
    "vue-loader-plugin": "^1.3.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.66.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.3",
    "webpack-node-externals": "^3.0.0"
  },

  "dependencies": {
    "better-sqlite3": "^7.4.6",
    "dotenv": "^11.0.0",
    "reflect-metadata": "^0.1.13",
    "typeorm": "^0.2.41",
    "vue": "^3.2.26",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2",
    "winston": "^3.4.0"
  }
}

Why @next version of vue-loader don't have this module ?

How can I resolve this ?

miltone
  • 4,416
  • 11
  • 42
  • 76
  • vue-loader doesn't have `./lib/loaders/pitcher` but has `./dist/pitcher` instead. This is a compatibility issue between webpack and vue-loader. Try older version of vue loader (<17.0.0). – József Takó Feb 03 '22 at 09:47
  • Yes I confirm your response. It exist many issue dealing with compatibility between package and this not exception. Try to switch different version package for solve issue type. Perhaps write complete response for check that and solve. THX – miltone Feb 03 '22 at 12:32

0 Answers0