环境

Node.js版本

$ node -v
v16.14.0

依赖包 package.json

{
  "name": "vue-print",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.6.14",
  },
  "devDependencies": {
    "@vue/cli-service": "~5.0.0"
    "vue-template-compiler": "^2.6.14"
  }
}

问题描述

在 vue.config.js 配置文件中引入了新的loader: ​​twig-loader​​

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    // twig rule loader
    const twigRule = config.module.rule('twig')
    twigRule.exclude.add(/node_modules/)
    // 添加新的loader处理
    twigRule
      .test(/\.twig$/)
      .use('twig-loader')
      .loader('twig-loader')
      .end()
  },
}

启动服务，报错如下

bogon:vue-demo hina$ npm run serve

> vue-print@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 ERROR  Failed to compile with 1 error                                                15:36:24

 error  in ./node_modules/.pnpm/twig@1.15.4/node_modules/twig/twig.js

Module not found: Error: Can't resolve 'path' in '/Users/user/Desktop/vue-demo/node_modules/.pnpm/twig@1.15.4/node_modules/twig'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

ERROR in ./node_modules/.pnpm/twig@1.15.4/node_modules/twig/twig.js 435:17-32
Module not found: Error: Can't resolve 'path' in '/Users/user/Desktop/vue-demo/node_modules/.pnpm/twig@1.15.4/node_modules/twig'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
 @ ./src/print-template.twig 1:11-31
 @ ./node_modules/.pnpm/vue-loader@15.10.0_k6i3prjitaqwfioy7oeoeqebte/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js& 4:0-49 16:17-30
 @ ./src/App.vue?vue&type=script&lang=js& 1:0-180 1:196-199 1:201-378 1:201-378
 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 9:2-8
 @ ./src/main.js 2:0-27 13:13-16

webpack compiled with 1

问题解决

报错提示很明确了

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

修改配置文件即可

方式一：

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      fallback: { path: false },
    },
  },

  chainWebpack: (config) => {
    // twig rule loader
    const twigRule = config.module.rule('twig')
    twigRule.exclude.add(/node_modules/)
    // 添加新的loader处理
    twigRule
      .test(/\.twig$/)
      .use('twig-loader')
      .loader('twig-loader')
      .end()
  },
}

方式二：

安装依赖

npm i path-browserify

修改配置文件

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      fallback: {
        path: require.resolve('path-browserify'),
      },
    },
  },

  chainWebpack: (config) => {
    // twig rule loader
    const twigRule = config.module.rule('twig')
    twigRule.exclude.add(/node_modules/)
    // 添加新的loader处理
    twigRule
      .test(/\.twig$/)
      .use('twig-loader')
      .loader('twig-loader')
      .end()
  },
}

参考
​​​Module not found: Error: Can‘t resolve ‘path‘ in ‘/Users/wangabai/Desktop/学习/vue/code/vue3.2-element​​