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


相关文章
|
NoSQL 算法 Java
【工具类用法】Hutool里的生成唯一Id唯的工具类
【工具类用法】Hutool里的生成唯一Id唯的工具类
1734 0
|
JSON JavaScript 数据格式
proxy error: could not proxy request解决方案
proxy error: could not proxy request解决方案
12084 5
proxy error: could not proxy request解决方案
Electron + Vite + TS + Vue3打开新窗口实战
前言 我们在使用 Electron 编写桌面应用时,打开新窗口可以说是一个非常常见的场景了。很多刚接触 Electron 的小伙伴面对这样一个问题可能都会显得比较棘手,比如打开新窗口如何知道渲染哪一个页面?打开的新窗口如何与其它窗口产生联系,比如父子窗口?...等等一系列问题。 今天我们就将 Electron 打开新窗口的常见做法分享给大家,而且是基于最新的 TS 封装。
2362 0
Electron + Vite + TS + Vue3打开新窗口实战
|
机器学习/深度学习 传感器 算法
数字图像处理实验(五)|图像复原{逆滤波和伪逆滤波、维纳滤波deconvwnr、大气湍流扰动模型、运动模糊处理fspecial}(附matlab实验代码和截图)
数字图像处理实验(五)|图像复原{逆滤波和伪逆滤波、维纳滤波deconvwnr、大气湍流扰动模型、运动模糊处理fspecial}(附matlab实验代码和截图)
2135 0
数字图像处理实验(五)|图像复原{逆滤波和伪逆滤波、维纳滤波deconvwnr、大气湍流扰动模型、运动模糊处理fspecial}(附matlab实验代码和截图)
|
搜索推荐 安全 数据安全/隐私保护
构建高效网站后台会员管理系统:实战指南与代码示例
【7月更文挑战第5天】在当今的互联网时代,几乎每个网站或应用程序都需要一个强大的会员管理系统来维护用户信息、权限控制以及个性化体验。一个设计良好的会员管理系统不仅能够提升用户体验,还能增强数据安全性和运营效率。本文将深入探讨如何从零开始构建一个网站后台会员管理系统,涵盖系统设计思路、关键技术选型、功能模块实现,以及实战代码示例。
1681 3
|
安全 Linux 网络安全
【工具使用】几款优秀的SSH连接客户端软件工具推荐FinalShell、Xshell、MobaXterm、OpenSSH、PUTTY、Terminus、mRemoteNG、Terminals等
【工具使用】几款优秀的SSH连接客户端软件工具推荐FinalShell、Xshell、MobaXterm、OpenSSH、PUTTY、Terminus、mRemoteNG、Terminals等
148541 0
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
2567 0
|
Java
深入探讨Java中的中断机制:INTERRUPTED和ISINTERRUPTED方法详解
在Java多线程编程中,中断机制是协调线程行为的重要手段。了解和正确使用中断机制对于编写高效、可靠的并发程序至关重要。本文将深入探讨Java中的`Thread.interrupted()`和`Thread.isInterrupted()`方法的区别及其应用场景。
511 4
|
监控 前端开发 JavaScript
6个顶级SpringCloud微服务开源项目,企业开发必备!
6个顶级SpringCloud微服务开源项目,企业开发必备!
5464 0
6个顶级SpringCloud微服务开源项目,企业开发必备!
|
人工智能 自然语言处理 搜索推荐
人工智能浪潮下的伦理挑战与反思
随着人工智能技术的快速发展,它已经渗透到我们生活的方方面面。然而,在享受其带来的便利同时,我们也不得不面对伴随而来的伦理问题。本文将从技术发展的角度出发,探讨AI技术应用中可能引发的伦理争议,并提出相应的解决建议,旨在为构建一个和谐的AI社会环境提供思考路径。