vue项目:webpack打包报错 TypeError: Cannot read properties of undefined (reading ‘styles‘)

于 2023-10-19 15:47:05 发布
阅读量643 收藏
点赞数
分类专栏： 模块 文章标签： vue.js webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mike_chen2stockings/article/details/133927572
版权

TypeError: Cannot read properties of undefined (reading ‘styles’)

好家伙，本来像打包一个 umd 格式的组件库，结果刚跑起来，直接报错。 主要这个报错信息太像代码内部问题了 于是，我开始各种找。

排查过程

  1. 查看内部代码结构，理解字面意思，是否真的style写错或者重复引用；
  2. 查看打包出来的dist 文件，然而并没什么卵用；
  3. 对比了组件中所有使用 style的地方是否使用异常；
  4. 好吧，以上都没有。
  5. 最后尝试把 loader 版本从17降到了15，重新 build，完美解决，综上所诉

原因

** 这是由于webpack和vue-loader版本不兼容造成 **

Mountain08
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - Syntax Error: TypeError: Cannot read properties of undefined (reading ‘styles‘) 项目运行时报错，详细解决方案
王佳斌
11-07 6117
vue2，Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')，webpack，npm run serve，报错怎么办，运行报错，run serve时出现报错如何解决，vue2项目运行报错Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')，vue2怎么解决npm run serve时的Cannot
Sawyer-zh#study-note#Vue-js路由报错TypeError-Cannot-read-property-c-
07-25
title: 'Vue.js路由报错:TypeError: Cannot read property ''_c'' of undefined'错误详情：像上面这
Cannot read properties of undefined (reading ‘styles‘)，使用webpack5搭建vue项目，vue-loader报错解决
小硅壳的博客
05-14 4267
其中版本vue-loader@17.0.0，vue-template-compiler和vue都是2.7。百度之后看到有人说是vue-loader版本问题，然后在vue-loader的github的。意思是vue2的话，vue-loader版本要低于等于15。，卸载17版本的vue-loader后，再安装15版本的。，最终不再报错，并能对vue文件进行加载。
TypeError: Cannot read properties of undefined (reading ‘styles‘)
splitSecond的博客
05-24 909
默认安装vue-loader到最新版本。把vue-loader降级到15版本。
vue 组件webpack 坑；Module build failed；TypeError: Cannot read property ‘styles‘ of undefined
weixin_42237509的博客
02-22 973
Module build failed;TypeError: Cannot read property 'styles' of undefined
Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx
01-21
Vue打包Cannot read property 'tapPromise' of undefined报错处理 Vue.js是一款流行的前端框架，用于构建用户界面和单页应用程序。然而，在使用Vue.js时，我们可能会遇到一些报错信息，例如Cannot read property '...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#&lt;Object&gt;‘的解决
08-30
在Vue开发过程中，有时会遇到一个常见的错误：`Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'`。这个错误通常发生在使用Webpack打包Vue应用时，由于模块导入导出规范的...
解决vue-cli webpack打包开启Gzip 报错问题
10-16
主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Uncaught TypeError Cannot read properties of undefined (reading ‘style‘)
qq_51389137的博客
10-10 1244
在element ui的table插槽中，如果使用了scope.$index在双向绑定的数据中或v-会概率出现此错误。在vue中v-if所渲染的内容是数组可能有数组个数或数据加载问题。渲染的内容不存在但是调用了。
vue项目打包后---TypeError: Cannot read properties of undefined (reading ‘echarts‘)问题解决
Attitude_do_it的博客
01-26 4842
问题描述 项目引入了echarts用来做中国地图，在本地cli跑的时候没有问题，但是build打包后会出现TypeError: Cannot read properties of undefined (reading 'echarts')。 原因 单独下载的echart中的china.js，项目中直接引用 import '../../assets/js/china.js' 打包后就会出现问题，不晓得是不是属于官方的bug 解决 用npm安装echarts npm install
Vue 报错 Cannot read properties of undefined (reading ‘parseComponent‘)
qd1014751893的博客
10-16 1405
Cannot read properties of undefined (reading ‘parseComponent‘) 报错解决办法
完美解决 Compiled with problems: × ERROR Cannot read properties of undefined (readin
全栈技术分享，项目分享，资料分享
04-04 1万+
启动vue ui 使用npm run serve编译启动时 , 出现以下问题:xERROR) at) at fn () at) atat.O () at。
Vue报错“Cannot read property ‘0‘ of undefined“的解决办法
qq_42708634的博客
07-21 1万+
相信大家在编写稍微大一点的项目的时候会遇到和我类似的问题 虽然项目可以运行,但是控制台会报错 如何解决呢? 首先根据提示找到错误所在的组件 然后在组件中找到相关代码 一般出问题都是出现的带有数组的变量中, 我们在使用之前需要先判断数组是否存在, 而且需要注意的是需要我们在数组变量所在的外层div中做一个判断该数组是否未定义 在我的项目中我加了一个判断完美解决: detailInfo.detailImage !== undefined ...
webpack 4报错
heyuqing32的博客
12-14 817
报错1： The CLI moved into a separate package：webpack-cli  Would you like to install webpack-cli ( That will run npm install -D webpack-cli)( yes/No ) 解决方案： 方案一：webpack 已经更新，webpack 4.0 之后 命令行单独分出一个包，...
Vue开启Gzip打包异常：webpack打包报错Cannot read property ‘emit‘ of undefined
YunWisdom
07-09 1585
Vue开启Gzip打包异常：webpack打包报错Cannot read property 'emit' of undefined 相关代码 const CompressionPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( var path = require('path') var utils = require('./utils') var webpack = require('webp.
webpack报错 TypeError: Cannot read property ‘tap‘ of undefined
热门推荐
c_liufeng的博客
12-03 1万+
webpack错误：TypeError: Cannot read property 'tap' of undefined 1.错误原因 可能是由于全局webpack 与 本地webpack版本不一致导致。 2.解决办法 可以先执行 npm uninstall webpack -g (先移除全局webpack架包) 再执行 npm install webpack@4.17.1 -g （@后边跟版本号，请在本地package.json中查看webpack版本） ...
Vue报错：Cannot read properties of undefined (reading ‘echarts‘)
SunPeng的博客
07-11 6262
Vue报错：Cannot read properties of undefined (reading ‘echarts‘)，引入中国地图china.js
vue项目启动报错：TypeError: Cannot read properties of undefined (reading 'styles')
最新发布
07-03
在 Vue.js 项目中遇到 "TypeError: Cannot read properties of undefined (reading 'styles')" 这样的错误，通常是因为代码试图访问某个未定义或尚未初始化的对象的 `styles` 属性。这可能发生在以下几个场景： 1. **组件引用问题**：你在模板中尝试获取某个样式（如 `this.$el.style` 或 `this.styles`），但这个变量没有被正确赋值或是在父组件传入数据时出错。 2. **CSS模块导入**：如果你在一个 Vue 组件中通过 `import styles from './styles.vue'` 引入 CSS，可能是文件路径错误或者文件内容里不存在`styles`属性。 3. **Vue CLI 配置问题**：在使用 Vue CLI 构建时，如果配置了特殊的样式处理（如 scss、less 等），检查一下引入和编译是否正确。 解决这个问题的方法通常是： - 检查错误发生上下文，看看是否有变量未定义或者路径不正确。 - 使用 `console.log()` 或者 `debugger` 查看在运行时该变量的状态。 - 确保引用的 CSS 文件或变量已正确加载，并且在预期的地方可用。 - 更新依赖项，确保使用的 Vue 版本和其他库是最新的。 相关问题： 1. 如何排查 Vue 中 `styles` 错误的具体原因？ 2. 在 Vue CLI 中如何正确导入并使用 CSS 文件？ 3. 如何在 Vue 中避免因未定义变量导致的此类错误？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值