程序员经验分享-hwhale

webpack 错误

2023-05-16

1 

ERROR in ./src/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):    
ReferenceError: document is not defined
    at Object.insertStyleElement (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:257:17)
    at Object.domAPI (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:175:30)
    at addElementStyle (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:64:21)
    at modulesToDom (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:48:21)
    at module.exports (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:85:25)
    at D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\di    at D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:629:2
    at Object.<anonymous> (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:631:12)
    at Module._compile (D:\front-end-interview\webpack\webpack5\advance\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at evalModuleCode (D:\front-end-interview\webpack\webpack5\advance\node_modules\mini-css-extract-plugin\dist\utils.js:41:10)
 @ ./src/index.js 9:0-20

webpack 5.44.0 compiled with 1 error in 3401 ms

删除style-loader，可以正常打包

2 


ERROR in ./src/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):    
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
    at Object.pitch (D:\front-end-interview\webpack\webpack5\advance\node_modules\mini-css-extract-plugin\dist\loader.js:51:14)

这里我们对 mini-css-extract-plugin 进行一下降级处理: ^2.1.0 -> ^1.3.6

降了版本之后，还是报错，根据提示信息，我们给配置加上 publicPath: './'

output: {

    filename: 'bundle.js', // 输出文件名

    path: path.join(__dirname, 'dist'), // 输出文件目录

    publicPath: './'

  },

在尝试一次

3 

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree
原因：安装的包与已经存在的包有冲突。
解决办法：npm install xxx -- force或者npm install xxx --legacy-peer-deps来安装。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

WEBPACK

webpack 错误 的相关文章

  • 如何运行 Webpack 开发服务器 --https --hot --inline

    使用 CLI 配置时 有没有办法在 https 上运行 webpack dev server 问题是连接到socket io结束了http并不是https 存在解决方法 但非常烦人 手动包含https webpack dev server在

  • 将 webpack（环境）变量传递给 scss 文件

    对 webpack 非常陌生 我希望能够读取一个值 在本例中具体是env from webpack config js in a sass文件 这样我就可以根据环境有不同的CSS 例如 env 开发 颜色 绿色 env 生产 颜色 蓝色 到

  • 我可以在浏览器中启动 socket.io/websocket 服务器吗？

    之前有人问过这个问题 答案是否定的 但是现在 有了 browserify webpack 我可以像在服务器上那样编写代码吗 它会在浏览器中运行 还是有任何限制使这变得不可能 你不能 在浏览器中启动服务器需要访问浏览器中根本不存在的低级功能

  • Webpack 用于后端？

    我只是想知道 我开始在一个新项目中使用 Webpack 到目前为止它运行良好 我几乎可以说我比我之前用过的 Grunt 更喜欢它 但现在我很困惑如何和 或应该将它与我的 Express 后端一起使用 看 我正在创建一个具有前端 ReactJ

  • Webpack - 如何捆绑/需要文件夹（子文件夹）的所有文件

    我想看看是否有更短的方式来运行 webpack 包 以及为什么我的加载器不起作用 这是我的代码 module exports context path join dirname dist entry ES6bundle js jQuery

  • 如何使用 React 和 TypeScript 设置具有多个页面和入口点的 Chrome 扩展？

    关于这一主题有很多问题和教程 但没有一个涵盖 Chrome 扩展的所有用例 因为大多数问题和教程都假设只有一个入口点 以下是必要条件 多个 单页应用程序 1 popup html对于扩展弹出页面 2 options html对于选项页面 3

  • Webpack 2 的语义 UI 问题

    一直在努力使用 Webpack 2 进行语义 ui 设置 我遇到了一些与默认语义 ui 主题中的字体相关的错误 以及另一个关于image webpack loader ERROR in css loader lessPlugins opti

  • webpack根据chunk加载不同的模块

    是否可以让 webpack 根据某些上下文信息加载另一个模块 例如 我的 React 应用程序有两个版本 桌面版和移动版 在我的 index js 中 我决定加载哪个应用程序 if isMobile loadMobile then defa

  • npm run build 上的 Babel-Loader 语法错误

    我对 webpack 不是很了解 正在尝试将 webpack 从 V3 更新到 V4 并设法将我的 webpack 配置更新到不会向我抛出折旧错误的程度 但我现在陷入了 babel loader 的语法错误 Module build fai

  • 在 React 组件中使用绝对路径

    如何使用根目录中的绝对路径并更改根目录来导入组件 import Modal from project app src Components Modal import Main from Constants 我想要将根目录更改为我可以从 sr

  • 在没有 Webpack 的情况下使用模块“child_process”

    我正在使用 Webpack 来捆绑依赖项 其中之一是电子邮件服务postmark 该服务依赖于称为child process显然是随节点一起提供的 问题是 当我尝试运行 webpack 来捆绑我的应用程序时 它会抱怨 找不到模块 错误 无法

  • 如何配置 Webpack 5 包以使用全局 jQuery？

    我有一个正在加载 jQuery 的网页 其中有一个指向 CDN 的脚本标记 我正在将 jQuery 加载到全局范围内 并且在整个站点中都有少量 JS 使用它 这一切都工作正常 我想继续以这种方式加载 jQuery 除此之外 我使用 Webp

  • 为什么需要在父子组件中多次导入React？

    如果您有已导入的父组件文件React 为什么它的任何渲染的子文件也需要导入 React 这是否只是一种安全措施 以防这些子项被渲染到尚未导入 React 的其他地方 In nodejs每个文件都是一个模块 有自己的变量范围 当您将变量导入文

  • 使用 webpack 动态提供图像

    我有一个关于 webpack 和服务图像的问题 我有一个 webpack 配置 它构建了一个 React webapp 并且还提供来自特定文件夹的 jpg 文件 但是 如果我从我的网络应用程序下载新图像并将其添加到此文件夹中 会发生什么情况

  • serverless-webpack 找不到模块“./node/NodeTemplatePlugin”

    我正在尝试使用无服务器 webpack 插件 https github com elastic coders serverless webpack 虽然单独运行 webpack 工作得很好 但尝试运行 serverless webpack

  • 覆盖 vuetify 中的 scss 变量

    为了增加 vuetify 的 v switch 的宽度 我想修改 vuetify 的 scss 变量的值 vuetify是通过vue cli配置的 开发的代码如下 src assets css overrides scss font siz

  • 我可以打包 Webpack 但不缩小调试范围吗？

    似乎是一个真正愚蠢的问题 必须在某个地方有答案 但我已经搜索了几个小时但没有结果 我是 ReactJS 和使用 Webpack 构建的新手 一般来说是构建配置 我正在使用 Webpack 链接和捆绑我的整个项目 包括 ReactJS 它工作

  • 使用 Vue.JS 时，我们是否被迫在 CSP 中使用“unsafe-inline”？

    有没有办法让 Vue js 与 CSP 正常配合 当我运行我的spa应用程序 由npm run generate使用 Nuxt js 我会收到几个警告 例如 拒绝应用内联样式 因为它违反了以下规定 内容安全策略指令 style src se

  • 具有多个 Angular + Nativescript 代码共享项目和可重用库的 Angular 工作区

    环境 tns 信息 获取 NativeScript 组件版本信息 组件原生脚本有更新 您当前的版本是 5 1 0 最新的可用版本是 5 1 1 组件 tns core modules 有更新 您当前的版本是 5 1 1 最新的可用版本是 5

  • Webpack 5 - 资产模块 - 缺少 url-loader 功能 - postTransformPublicPath

    我想按照建议切换到 webpack 5 asset 模块 不幸的是我错过了 webpack url loader 的函数 postTransformPublicPath path any gt any 由于我们应用程序的结构 资产的公共区域

随机推荐

  • MySQL错误-this is incompatible with sql_mode=only_full_group_by解决办法

    原因分析 xff1a 一 原理层面 这个错误发生在mysql 5 7 5 版本及以上版本会出现的问题 xff1a mysql 5 7 5版本以上默认的sql配置是 sql mode 61 ONLY FULL GROUP BY xff0c 这

  • pulsar-admin接入项目

    练手项目 第一步 xff1a 添加依赖 lt dependency gt lt groupId gt org apache pulsar lt groupId gt lt artifactId gt pulsar client admin

  • C/C++语言——函数返回临时变量、对象

    函数内部栈上创建的临时变量 临时对象 xff0c 生命周期只在函数运行期间 xff0c 函数运行结束后 xff0c 就会释放对应内存空间 错误的函数写法 int amp test1 int x 61 1 return x 错误的函数写法 i

  • VS2008——调试方法大全

    一 断点调试 总结以下VS2008的调试方法 xff0c 首先最常用的就是使用断点了 xff0c 断点分为两种 xff1a 普通断点 跟踪点 普通断点就是红色圆点 xff0c 跟踪点是红色菱形 可以通过右键设置断点相关内容 xff0c 让断

  • Effective C++——22.将成员变量声明为private

    1 一致性 xff1a 如果public中的每样东西都是函数 xff0c 就不需要思考使用的时候要不要带小括号 2 使用函数可以让成员变量的处理有更精确的控制 3 封装性 xff1a 有时候要根据不同情况修改set和get的实现方式 xff

  • Effective C++——4.确定对象被使用前已经初始化

    1 为防止有的情况下对象未初始化导致的混乱 xff0c 最佳的处理办法就是 xff1a 永远在使用对象之前先将它初始化 对于无任何成员的内置类型 xff0c 必须手工完成 2 内置类型以外的任何其他东西 xff0c 初始化责任在构造函数中

  • Effective C++——32.确定public继承是“is-a”关系

    1 is a关系的概念 xff0c 就是基类可以实现的事情 xff0c 子类就一定要能实现 如果不能实现 xff0c 可以修改设计 xff0c 比如将基类能实现 xff0c 子类却不能实现的事情派生出一个中间基类 记住一点 xff1a 1

  • Java中repaint方法清除原来图像问题

    虽然Java界面编程作用不大 xff0c 但在兴趣的驱使下还是了解了一下 xff0c 在写小程序的时候发现了repaint方法有时候会清理原来的图像 xff0c 有时候又不清理 下面贴出我通过API文档得出的结论 xff0c 以下例子窗口为

  • 怎样找回自己CSDN丢失博客？

    写博客是件很欢快的事情 xff0c 但没多久就发现自己刚写的博客丢失 xff0c 这是一件更加 欢快 的事情 百度了一下关于CSDN博客丢失的现象 xff0c 虽然不算很多 xff0c 但还是有个别人也同样发生了这样的情况 注 xff1a

  • 拓扑排序(队列实现)

    什么是拓扑排序呢 xff1f 就是将一个有向无环图中所有顶点在不违反先决条件关系的前提下排成线性序列的过程称为拓扑排序 学拓扑排序有什么用呢 xff1f 当然有用啦 比如说学校排课的时候 xff0c 会考虑到有的课程需要先修 我们学完C程序

  • Arch的VBox安装笔记

    Arch Version archlinux 2015 12 01 dual Virtual Box Version 5 0 16 r105871 Update xff1a 2016 03 26 17 08 18 1 分区 xff08 cf

  • Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file

    maven打包报错 org springframework boot maven BuildInfoMojo hasbeen copiled by a more recent version of the Java Runtime clas

  • 前端JS接收服务端的二进制文件流实现文件下载

    前端JS接收服务端的二进制文件流实现文件下载 var binaryData 61 binaryData push res 改成Boole或者file类型 const url 61 window URL createObjectURL new

  • debian10ssh配置用户限制，日志等

    需求 xff1a 工作端口为2021 xff1b 只允许用户user01 xff0c 密码ChinaSkill21登录到router 其他用户 xff08 包括root xff09 不能登录 xff0c 创建一个新用户 xff0c 新用户可

  • CentOS搭建PySpider爬虫服务

    1 环境准备 前置环境部署 在开始部署前 xff0c 我们需要做一些前置准备 yum 更新 yum span class hljs operator span class hljs keyword update span y span 安装

  • openGauss5.0企业版CentOS单节点安装

    目录 一 安装环境 二 前置依赖包 三 安装前准备1 四 安装前准备2 五 安装 一 安装环境 CPU xff1a 2核 内存 xff1a 4G 磁盘 xff1a 20G 操作系统 xff1a CentOS 7 9 python版本 xff

  • SpringBoot+PageHelper+Bootstrap+Thymeleaf 实现分页功能

    本文针对那种想要快速实现功能 xff0c 而不是研究原理的 xff0c 那你就直接复制我的东西 xff0c 运行就好 如果想深入学习的同学请另行百度 第一种 Spring Boot 43 Thymeleaf 使用PageHelper实现分页

  • Idea集成使用SVN教程

    idea 从项目窗口跳到打开项目选项窗口 操作之后即可跳到如下界面 第一步 下载svn的客户端 xff0c 通俗一点来说就是小乌龟啦 xff01 官网下载地址 xff1a Downloads TortoiseSVN 下载之后直接安装就好了

  • IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结

    IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结 请叫我大师兄 CSDN博客 ideasvn配置 https blog csdn net qq 27093465 article details 74898489 首先 x

  • webpack 错误

    1 ERROR in src main css Module build failed from node modules mini css extract plugin dist loader js ReferenceError docu

热门标签