环境
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
> [email protected] serve
> vue-cli-service serve
INFO Starting development server...
ERROR Failed to compile with 1 error 15:36:24
error in ./node_modules/.pnpm/[email protected]/node_modules/twig/twig.js
Module not found: Error: Can't resolve 'path' in '/Users/user/Desktop/vue-demo/node_modules/.pnpm/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]_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 error
问题解决
报错提示很明确了
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