cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_mod

于 2024-03-11 17:16:02 发布
阅读量996 收藏 8
点赞数 8
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yhlsunshine/article/details/133383926
版权

项目场景：

项目相关背景：

使用 Visual Studio Code（简称“VS Code”） 开发 vue 项目时，控制台出现以下报错信息：

cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./tools/vue-filename-injector/src/lib/injector.js?!./src/views/benefit/upload-update.vue?vue&type=script&lang=js&:521 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘id’)
at VueComponent.handleRemove (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./tools/vue-filename-injector/src/lib/injector.js?!./src/views/benefit/upload-update.vue?vue&type=script&lang=js&:521:35)
at doRemove (element-ui.common.js:29691:16)
at eval (element-ui.common.js:29700:13)

问题描述

遇到的问题：

例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据
APP 中接收数据代码：

cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./tools/vue-filename-injector/src/lib/injector.js?!./src/views/benefit/upload-update.vue?vue&type=script&lang=js&:521 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')
    at VueComponent.handleRemove (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./tools/vue-filename-injector/src/lib/injector.js?!./src/views/benefit/upload-update.vue?vue&type=script&lang=js&:521:35)
    at doRemove (element-ui.common.js:29691:16)
    at eval (element-ui.common.js:29700:13)

在这里插入图片描述

原因分析：

分析：

  1. 路径长度过长：可能是因为您的文件路径过长，超出了系统或工具的限制。

  2. 文件路径错误：有时候设置的文件路径不正确也会导致类似错误。请确保在 webpack 配置文件或相关代码中正确地指定了文件路径。

  3. 构建工具配置错误：可能是您的构建工具配置有误，导致无法正确加载所需的模块。

  4. 依赖模块问题：某个依赖模块可能存在问题或不兼容，导致构建失败。

  5. 缓存问题：有时候缓存文件可能引发类似的错误。

解决方案：

解决方案：

  1. 路径长度过长：可能是因为您的文件路径过长，超出了系统或工具的限制。

    解决方法 :
    尽量缩短文件路径名，保持路径长度在合理范围内。

  2. 文件路径错误：有时候设置的文件路径不正确也会导致类似错误。

    解决方法 :
    请确保在 webpack 配置文件或相关代码中正确地指定了文件路径。

  3. 构建工具配置错误：可能是您的构建工具配置有误，导致无法正确加载所需的模块。

    解决方法 :
    请检查 webpack 配置文件或其他相关构建工具配置，确保配置正确。

  4. 依赖模块问题：某个依赖模块可能存在问题或不兼容，导致构建失败。

    解决方法 :
    您可以尝试更新相关依赖模块，或者检查是否有版本兼容性的问题。

  5. 缓存问题：有时候缓存文件可能引发类似的错误，

    解决方法 :
    尝试清除缓存或者尝试重新构建项目。

努力学编程呀(๑•ี_เ•ี๑)
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
babel-plugin-replace-only-development:基于process.env.NODE_ENV的简单替换插件
05-13
babel插件只能替换开发 基于process.env.NODE_ENV的简单替换插件。 该插件是元程序学习课程LT。 用法 在您的.babelrc中 { " plugins " : [ [ " babel-plugin-replace-only-development " , { " rules " : { " https://api.example.com " : " http://localhost:3000 " } } ] ] } 在您的代码中（例如index.js） import axios from 'axios' axios . get ( 'https://api.example.com' ) 运行NODE_ENV =开发结果 import axios f
next-compile-node-modules:Next.js插件可使用Babel编译所有node_modules
05-27
下一个编译节点模块 Next.js插件可使用Babel编译所有node_modules 。 动机 程序包作者应将任何JavaScript代码发布到npm，只要它只是纯有效JavaScript（任何版本）即可。 在软件包级别进行编译是没有意义的，因为作者不知道在哪种上下文中使用其软件包。 例如，已经发布了带有编译为ES5的代码的软件包，可以在仅针对常绿浏览器的应用中使用，从而使捆绑包不必要地变大（反之亦然）。 相反，应用程序开发人员应使用编译node_modules并指示其产生与要支持的浏览器（例如“ IE 11”）兼容的功能。 诸如类的流行样板项目现在可以编译所有node_modules ，您也应该编译！ 该插件更改Next.js的webpack配置，以默认情况下编译所有node_modules 。 尽管这会影响性能，但它只会减慢第一次编译的速度，而借助内置的缓存，后续编译的速度会更
babel-loader-exclude-node-modules-except:创建正则表达式以将节点模块排除在转译之外（单个模块除外）
05-22
babel-loader-排除节点模块-除外 声明书 分行 职能 线数 创建一个正则表达式以排除node_modules 来自babel transpiling，单个模块除外 用法 // webpack.config.js const babelLoaderExcludeNodeModulesExcept = require ( 'babel-loader-exclude-node-modules-except' ) ; module . exports = { // config properties // ... module : { rules : [ { test : / \. js $ / , exclude : babelLoaderExcludeNodeModulesExcept ( [
wechat-user-service.rar_http://wechata_nodeJS 微信_nodejs_wechat_w
09-24
nodejs编写的微信用户管理模块；用的是ES6及babel编译
@babel中使node.js可以支持ES6，jsx语法（create-react-app中配置）
01-20
先看下我package.json依赖吧 dependencies: { @babel/cli: ^7.8.4, @babel/core: ^7.8.4, @babel/node: ^7.8.4, @babel/preset-env: ^7.8.4, .................. } 接下来当然是安装了，此处本人用yarn yarn add @babel/cli @babel/core @babel/node --save yarn add @babel/preset-env --save 安装结束
vue项目报错：.node_modulescache-loaderdistcjs.jsref--12-0
m0_55070913的博客
03-02 1万+
vue项目报错如下： ./pageLift.vue in ./node_modules/cache-loader/dist/cjs.jsref–12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.jsref–0-0!./node_modules/vue-loader/libvue-loader-options!./src/views/testPage/index.vuevue&type=script&am
解决 “Module build failed (from ./node_modules/babel-loader/lib/index.js)“ 错误的方法
最新发布
pleaseprintf的博客
07-25 1万+
在前端项目开发中，如果使用了 Babel 来转译 ES6+ 语法，有时会遇到错误信息 “Module build failed (from ./node_modules/babel-loader/lib/index.js)”。这个错误通常发生在使用 Webpack 或其他构建工具时。本文将详细介绍出现这个错误的原因，并提供解决方法，确保正确转译 ES6+ 语法，避免该错误的发生。
vue项目导入报错These relative modules were not found:
weixin_a18297652723的博客
12-21 6790
ERROR Failed to compile with 2 errors 上午8:38:06 These relative modules were not found: * ./Logo in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-..
vue执行配置选项npm run serve的本质
pulledup的博客
09-14 1万+
npm run serve、npm run build等“调试运行脚本”：仅仅是Vue默认在内部做了1个“命令行”封装而已！以包配置文件（package.json）的形式与用户交互。打开“工程”下的node包依赖路径下的“可执行脚本”目录：node_modules\bin。
错误解决 node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules
热门推荐
qq_37766810的博客
08-10 3万+
一、问题如图 意思是后面的文件里缺少 前者的引入 二、问题如图 解决办法也是将iconfont文件插入到vue文件里
NODE.JS加密模块CRYPTO常用方法介绍
10-25
主要介绍了NODE.JS加密模块CRYPTO常用方法介绍,需要的朋友可以参考下
Node.js-基于Node.jsReactMongoDBSwagger和Babel的JavaScript全栈入门套件
08-09
基于Node.js，React，MongoDB，Swagger和Babel的JavaScript全栈入门套件
CLI工具可设置Webpack并在给定目录上作出React/预先处理-Node.js开发
05-27
Webpack Up CLI工具可使用webpack + babel + react / preact来快速启动项目安装npm install -g webpack-up如何使用它我制作此工具的目的是添加webpack + babel +对现有的Webpack Up CLI工具进行快速启动项目使用webpack + babel + react / preact安装npm install -g webpack-up如何使用它我制作此工具的目的是将webpack + babel +对现有项目进行React（例如，将演示应用程序添加到库中），但是您可以使用它从头开始一个项目，您只需要一个带有package.json的目录并运行：webpack-up --manager yarn --framework react --entrypoint'my-app / index.js'该命令将被设置
Vue踩坑之Error in render: “TypeError: Cannot read properties of undefined (reading ‘url‘)“ found in
weixin_42677904的博客
11-19 2万+
Vue踩坑之Error in render: “TypeError: Cannot read properties of undefined (reading ‘url’)” found in 今天写项目时发现项目报错，原因是Vue项目中使用v-if判断。一般来说都不会有什么问题的，但是当你判断的变量是多重对象属性时就会出现问题。比如下面的代码： <div v-if="obj.file.url"></div> <script> export default { dat
vue3 报错 cannot read properties of undefined “reading url“
weixin_44832362的博客
11-28 2230
vue3 报错 cannot read properties of undefined "reading url"
VUE 集成 Electron 报错
a732124645的博客
03-17 889
前言 我用vue cli 4.0创建了一个简单的vue app，并成功地将其与electron集成。一切都运行得很好，直到我尝试在vue文件中导入electron。问题是我不能通过ipcRenderer向主进程发送消息。 Uncaught TypeError: fs.existsSync is not a function at getElectronPath (index.js?1704:7) at eval (index.js?1704:18) at Object../node_
vue require 报 node_modules/babel-loader/lib错误
sinat_23336093的博客
06-08 3602
vue require 报 node_modules/babel-loader/lib错误 vue项目中报这样的错误： …/…/assets/images/11.png in ./node_modules/cache-loader/dist/cjs.js??ref–12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader/lib??vue-lo
vue报错 运行npm run dev报cjs.js缺失
csz_12345的博客
04-20 6821
vue 运行 npm run dev 或者npm run serve 报core-js/modules/es6.array.find in ./node_modules/_cache-loader@2.0.1@cache-load，这是因为当前模块没有升级，或者下载掉包， 只要重新下载安装就可以了，执行 npm install core-js@2 //更新版本 以下是报错部分内容 ...
swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/Swiper/index.vue?vue&type=script&setup=true&lang=js
07-11
根据你提供的错误信息来看，可能是在 Vue 组件中引入 Swiper 时出现了问题。请按照以下步骤进行排查和修复： 1. 首先，确认你已经在项目中安装了 `swiper` 包。可以通过以下命令来检查： ```bash npm list swiper ``` 如果没有安装或者版本不正确，可以执行以下命令重新安装： ```bash npm install swiper ``` 2. 确保在引入 Swiper 的组件中，按照正确的方式导入 Swiper 和 SwiperSlide 组件： ```javascript import { Swiper, SwiperSlide } from 'swiper/vue'; import 'swiper/swiper-bundle.css'; ``` 3. 确保你的项目中已经安装了 `vue-loader` 的 v16 版本，因为根据错误信息，你使用了 `vue-loader-v16` 的引入方式。你可以通过以下命令检查 `vue-loader` 的版本： ```bash npm list vue-loader ``` 如果版本不正确，可以执行以下命令更新到最新版本： ```bash npm install vue-loader@^16.0.0 ``` 4. 如果上述步骤都没有解决问题，可能是 webpack 配置有误。请检查你的 webpack 配置文件，确保已正确配置 `vue-loader`。例如，在 `webpack.config.js` 或 `vue.config.js` 中添加以下内容： ```javascript module: { rules: [ // ... { test: /\.vue$/, loader: 'vue-loader' } ] } ``` 确保你的配置与你的项目和构建工具相匹配。 请按照以上步骤逐步检查和修复问题，如果问题仍然存在，请提供更多相关的错误信息，以便我能够更好地帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值