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


相关文章
|
缓存
npm install 一直卡着不动如何解决
npm install 一直卡着不动如何解决
6813 0
|
JSON fastjson Java
Fastjson 序列化,反序列化Map对象排序问题(字符串转map,map转字符串)
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qingfeng812/article/details/61194594 ...
5109 0
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
12月前
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
3959 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
资源调度 JavaScript 定位技术
Vue2使用百度地图展示或搜索地点(vue-baidu-map)
本文介绍了如何在 Vue 项目中使用 `vue-baidu-map` 插件,包括安装、全局注册及具体应用。首先通过 `yarn add vue-baidu-map` 安装插件,并在 `main.js` 中全局注册。然后展示了如何在地图上显示特定位置的标记,以及如何搜索地点并获取其经纬度和详细地址信息。代码示例提供了详细的实现方法和样式调整。如需使用,请确保已获取百度地图 API 的密钥。
2614 1
|
JavaScript
cnpm 的安装与使用
本文介绍了npm和cnpm的概念、安装nodejs的步骤,以及cnpm的安装和使用方法,提供了通过配置npm使用中国镜像源来加速包下载的替代方案,并说明了如何恢复npm默认仓库地址。
cnpm 的安装与使用
|
JavaScript 测试技术 API
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
|
Java UED
基于SpringBoot自定义线程池实现多线程执行方法,以及多线程之间的协调和同步
这篇文章介绍了在SpringBoot项目中如何自定义线程池来实现多线程执行方法,并探讨了多线程之间的协调和同步问题,提供了相关的示例代码。
3499 0
|
JavaScript
TypeScript——Record类型
TypeScript——Record类型
183 0
|
JavaScript 前端开发 算法
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
8499 0