Module not found: Error: Can‘t resolve ‘path‘

简介: Module not found: Error: Can‘t resolve ‘path‘

环境

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 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


相关文章
|
12月前
|
JavaScript
Syntax Error: Error: Cannot find module ‘node-sass‘
Syntax Error: Error: Cannot find module ‘node-sass‘
303 0
|
移动开发 前端开发
RN运行项目Error:Unable to resolve module
RN运行项目Error:Unable to resolve module
1084 0
RN运行项目Error:Unable to resolve module
|
12月前
Failed to execute script ‘xxx‘ due to unhandled exception:No module named ‘ctypes‘
Failed to execute script ‘xxx‘ due to unhandled exception:No module named ‘ctypes‘
411 0
|
2月前
|
JavaScript Python
7-4|execjs._exceptions.ProgramError: Error: Cannot find module 'jsdom'
7-4|execjs._exceptions.ProgramError: Error: Cannot find module 'jsdom'
|
6月前
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
|
4月前
|
前端开发
Error in created hook: “TypeError: _test.default is not a function
Error in created hook: “TypeError: _test.default is not a function
|
5月前
|
关系型数据库 MySQL Linux
FATAL ERROR: Could not find my_print_defaults
FATAL ERROR: Could not find my_print_defaults
156 0
|
12月前
|
JavaScript
vue 报错-Module not found: Error: Can't resolve 'element-plus' in '
vue 报错-Module not found: Error: Can't resolve 'element-plus' in '
275 1
|
11月前
Error: Cannot find module ‘express‘
Error: Cannot find module ‘express‘
|
Java 关系型数据库 MySQL
8. 成功解决:Error: Module not specified
使用 IDEA 时,调用 `main` 方法,提示 `Error: Module not specified` 错误,意思是“module 未指定”。
3268 1