webpack 运行时报 jQuery的错

最新推荐文章于 2023-10-30 16:29:47 发布
原创 最新推荐文章于 2023-10-30 16:29:47 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #node.js #webpack

在使用npm install jQuery-S安装jQuery后，执行webpack时遇到模块找不到的错误，如jsdom、xmlhttprequest和location等。错误原因是该版本的jQuery不适用于当前环境。解决方案是卸载已安装的jQuery-S，改用npm install jquery进行安装，重新运行webpack即可消除错误。确保正确安装和使用jQuery避免类似问题。

webpack 运行时报 jQuery的错

报错信息：

ERROR in ./node_modules/jQuery/lib/node-jquery.js 5:13-35
Module not found: Error: Can't resolve 'jsdom' in 'C:\Users\Dell\Desktop\dmeo\node_modules\jQuery\lib'
 @ ./src/index.js 1:0-22 3:0-1 4:4-5 5:4-5

ERROR in ./node_modules/jQuery/lib/node-jquery.js 8:28-68
Module not found: Error: Can't resolve 'xmlhttprequest' in 'C:\Users\Dell\Desktop\dmeo\node_modules\jQuery\lib'
 @ ./src/index.js 1:0-22 3:0-1 4:4-5 5:4-5

ERROR in ./node_modules/jQuery/lib/node-jquery.js 13:24-43
Module not found: Error: Can't resolve 'location' in 'C:\Users\Dell\Desktop\dmeo\node_modules\jQuery\lib'
 @ ./src/index.js 1:0-22 3:0-1 4:4-5 5:4-5

Module not found: Error: Can't resolve 'navigator' in 'C:\Users\Dell\Desktop\dmeo\node_modules\jQuery\lib'
 @ ./src/index.js 1:0-22 3:0-1 4:4-5 5:4-5

4 errors have detailed information that is not shown.

错误原因：

当时 安装jquery包的时候 安装的命令是 npm i jQuery -S ,这个确实是jQuery ，使用 npm run dev命令执行 webpack 以后，相应的样式代码也能够实现，但是会报错。

解决办法：
卸载掉我们之前安装的jQuery 包 npm uninstall jQuery -S 然后 ，安装jquery ，npm i jquery -S，就可以解决了，再重新运行就不会报错啦

tips: 我们使用 jquery 的时候，安装包 安装jquery 不要安装 jQuery

在这里插入图片描述

VUE中使用 zTree -- jQuery 树插件 及 使用时报错 jQuery is not defined 的问题解决
weixin_34417814的博客
12-26 1815
使用需求 时隔两年多，再次使用到了 ztree ，这次是在vue中引入使用，并遇到了一些小问题，在这里把经验和解决办法给大家分享下，共勉。ztree： zTree -- jQuery 树插件 官网简介 zTree v3.5 Demo 演示有关ztree的使用，之前整理过两篇在jquery中使用的方法，大家参考下：zTree -- jQue...
webpack版本与extract-text-webpack-plugin版本不兼容导致的npm run build运行时报错
qq6412110的博客
03-06 6551
查了是由于extract-text-webpack-plugin该组件不支持webpack4.x以上版本导致。放弃使用extract-text-webpack-plugin可以解决 我的webpack.config.js: { "name": "gnhhc", "version": "1.0.0", "main": "index.js", "scripts": { "...
vue中调用jquery 不成功 报错Module not found: Error: Can‘t resolve ‘jquert‘ in ‘../XX/XXX/‘
violet217的博客
08-03 1617
vue jquery报错
运行webpack，发现jQuery出现报错
TD_TaerG的博客
01-14 1596
以下是主要报错 ​ ERROR in ./node_modules/jQuery/lib/node-jquery.js Module not found: Error: Can't resolve 'jsdom' in 'D:\前端\新code\new2\node_modules\jQuery\lib' @ ./node_modules/jQuery/lib/node-jquery.js 5...
Module not found: Error: Can‘t resolve “xxx“ in “xxx“导致该问题的解决方案
热门推荐
qq_59389108的博客
01-07 6万+
其细致的报错为：Module not found: Error: Can't resolve './images/logo.png' in 'xxx'2：在非路由组件中的style下采用了less样式，而没有下载less相关依赖。在遇到报错时应该仔细阅读报错提示，这样解决起来也不会没有头绪。1：在非路由组件中出现了图片路径，而路由根组件并未导入该图片。根据报错提示反应的情况是：找不到模块：错误：无法解析。在此处我们谈论一下解决该类报错的几种方法。解决方案：在非路由组件下导入该图片。
解决使用 jQuery 在 Webpack 打包内容的过程中遇到的问题：‘ERROR in ./node_modules/jquery/lib/node-jquery.js 13:24-43‘
狮子座的男孩
10-08 1130
1、出现问题的提示为： 'ERROR in ./node_modules/jquery/lib/node-jquery.js 13:24-43'; 'Module not found: Error: Can't resolve 'location' in 'D:\*******\Webpack\node_modules\jquery\lib' @ ./04index2.js 1:0-22 9:0-1 10:4-5 11:4-5'; 2、解决问题的方案： A、去 npm 社区去搜一下最新的 jquery
Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
weixin_33966095的博客
11-07 7187
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue;给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼的人" 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,...
关于手动使用webpack进行项目构建总结
sake_pipi的博客
11-09 258
2020-11-09发布，原文链接关于手动使用webpack进行项目构建总结 总结一下手动使用webpack进行项目构建，都有哪些步骤，以及有哪些步骤需要注意的 以下内容前提条件是安装了node.js 一首先创建项目路径并添加src、dist项目结构 src下文件包括css、js、images、index.html、main.js main.js是项目打包的入口文件 F:\project_center\webpack_project 在项目根路径中调用DOS窗口，输入生成项目配置文件package.jso
webpack搭建react项目步骤实现
m0_48164934的博客
07-13 723
文章目录 提示：本文篇幅较长，请耐心看完哦~ 本篇文章是介绍基于React和webpack搭建的一套完整项目流程，开始吧。 文章目录文章目录前言一、项目创建1.全局安装react2.本地新建react项目文件二、安装相关组件1.安装react, react-dom, webpack2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面
前端系列十九：Vue项目中引入外部JS报错原因
WebYanXin的博客
12-30 8718
第一步: 在Vue中引入某个组件时，在Vue单页面找不到组件注册时，这个时候该考虑组件是否在Vue里 的html页面里是否是用 <script></script>标签引入的第三方JS文件 示例： <script src=http://xingcuan.com/he/we-sitemap/master/sitemap.0.1.js></script> 第二步： 引入功能正常后,可能浏览器控制台会报类似于： sitemap.0.1.js:1 Un..
Layui 踩坑之路
qq_41722795的博客
03-24 355
Layui 弹窗关闭销毁问题 弹窗关闭后再次打开，输入框内容不清空，输入框为关闭前的内容 目录 Layui 弹窗关闭销毁问题 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 问题描述： 如：弹窗内的一输入框： 内容为： 12345， 关闭后再次初始化， 再次初始化，打开后其内容仍旧为：12345 一、解决方案 将需要初始化的 使用模板写入 <script id="template" type="text/template"&...
前端报错 : Module not found: Error: Can‘t resolve ‘xxx‘ in ‘xxx‘
weixin_64778225的博客
09-06 4万+
模块未找到:错误:无法解决../src/comporents/MyHeader' 在 'C:\Users\15718\Desktop\eight\src'错误原因是组件引入 App.vue/其他组件 时出错了,仔细检查引入的!我的就是components拼写错了,查了二十分钟才发现,唉.
ERROR in./node_modules/jquery/lib/node-jquery.js 5:13-35
u013744998的博客
02-28 267
而不是 npm install jQuery -S （运行这个就会报错）在安装jQuery时！是运行 npm install jquery -S。
vue导入xlsx-style组件报错：Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
一方湖泊
01-13 1666
解决：在vue.config.js添加 configureWebpack: { externals:{ './cptable': 'var cptable' }, } 参考： https://blog.csdn.net/HDdgut/article/details/115356719 https://blog.csdn.net/sunyv1/article/details/108601772
一招解决vue中Module not found Error Can‘t resolve ‘xxx‘
m0_54853420的博客
03-02 6213
你是否遇到过类似于这种的报错，是不是觉得很头疼，不知道从哪解决。别急，下面两步解决问题。 解决方案： 1.删除项目文件夹下的node_modules文件夹 2.执行npm install命令，重新安装包。 执行完上面两步，应该就解决问题了。 ...
记一次解决pnpm i xlsx-style 引入报错问题-Error: Can‘t resolve ‘../xlsx‘ in ‘XXX/xlsx-style’ 问题
RightWaitHere的博客
10-30 2504
由于业务需求，需要使用到xlsx-style插件 对 Excel 表格进行相应的美化。在初次 使用 npm 进行 依赖安装时，使用过程中无任何警告问题，在 node_module 中 找到 xlsx-style 依赖文件目录，打开其中的 ods.js 文件可以发现尝试将 ‘…/xlsx’ 修改为 ‘./xlsx’ 后，重启项目，无警告错误，问题解决。显然，这种解决方式并不友好，于是我使用了如下方案：在 index.html 文件中 引入 xlsx 文件</...})
Module not found Error Can‘t resolve ‘core-jsmoduleses.promise.js‘ in
m0_67401228的博客
03-03 2115
未安装core-js 在package.json所在目录 ：npm i core-js -D ERROR in ./src/js/index.js 1:0-48 产环境配置15js兼容性处理srcjs' ERROR in ./src/js/index.js 2:0-39 Module not found: Error: Can't resolve 'core-js/modules/es.promise.js' in 'D:DesktopMy FilesRecentlyStudyWebPackdemo3.w
打包webpack时出错：ERROR in ./node_modules/jquery/lib/node-jquery.js
The_Lucky_one的博客
05-14 4687
打包webpack时出错： ERROR in ./node_modules/jquery/lib/node-jquery.js npm run dev 报错提示： ERROR in ./node_modules/jquery/lib/node-jquery.js Module not found: Error: Can't resolve 'jsdom' in 'E:\Users\Administrator\Desktop\webpack笔记\node_modules\jquery\lib' @ ./n
报错：Module not found: Error: Can’t resolve ‘./src’ in XXX
Dutuy的博客
10-20 2116
报错：Module not found: Error: Can’t resolve ‘./src’ in XXX@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全
import js from '@eslint/js' import pluginVue from 'eslint-plugin-vue' import globals from 'globals' export default [ { name: 'app/files-to-lint', files: ['**/*.{js,mjs,jsx,vue}'], }, { name: 'app/files-to-ignore', ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'], }, { languageOptions: { globals: { ...globals.browser, }, }, }, js.configs.recommended, ...pluginVue.configs['flat/essential'], ] 请解释上述代码
最新发布
07-15
<think>首先，用户的问题是关于解释一段ESLint配置代码的作用和结构。用户说：“我想解释提供的ESLint配置代码 请问请解释以下ESLint配置代码的作用和结构”。但用户没有提供具体的ESLint配置代码。我需要检查用户的消息。 在用户消息中，用户引用了三个引用：[^1]、[^2]、[^3]，这些引用是关于ESLint的教程和介绍。引用[1]讨论了ESLint配置文件，引用[2]讨论了安装和配置，引用[3]讨论了ESLint的好处。但用户没有提供任何具体的ESLint配置代码。 用户说：“我想解释提供的ESLint配置代码”，但用户没有提供任何代码。这可能是用户忘记贴代码了。在系统指令中，它说“回答中引用的段落末尾自然地添加引用标识”，但用户的问题中没有提供代码。 回顾用户的消息："我想解释提供的ESLint配置代码 请问请解释以下ESLint配置代码的作用和结构"。用户提到了“提供的ESLint配置代码”，但没有给出代码。可能用户是在引用之前的上下文，或者这是一个错误。 在系统指令中，有“参考站内引用”，提到了三个引用，但这些是描述ESLint的一般信息，不是具体的配置代码。 用户消息的最后部分：“我想解释提供的ESLint配置代码 请问请解释以下ESLint配置代码的作用和结构”。用户可能期望我基于引用或一般知识来解释一个典型的ESLint配置。 但引用[1]提到“ESLint 配置文件格式”，引用[2]讨论“安装和配置ESLint”，引用[3]讨论“ESLint有什么好处”。没有具体的代码片段。 或许用户的意思是让我解释ESLint配置的一般结构和作用，基于这些引用。 系统指令说：“生成相关问题”，所以我还需要生成相关问题。 另外，指令要求使用中文回答，行内数学表达式用$...$，独立公式用$$...$$，但由于主题是ESLint配置，可能没有数学表达式，所以我可以忽略那部分。 结构化我的回答： 1. **解释ESLint配置代码的作用和结构**：既然用户没有提供具体代码，我应该基于一般知识解释一个典型的ESLint配置文件。例如，一个常见的.eslintrc.js文件。 - 作用：ESLint配置用于定义代码检查规则，包括语法规则、代码风格、错误检测等。 - 结构：典型的配置文件包括： - `env`: 指定环境，如node、browser。 - `extends`: 继承共享配置，如eslint:recommended。 - `parserOptions`: 解析器选项，如ecmaVersion。 - `rules`: 定义具体规则，如"no-console": "error"。 我可以参考引用[1]，它讨论了ESLint配置文件的主要配置项。 2. **添加引用标识**：在解释中，如果引用来源，添加[^1]、[^2]等。例如，提到配置文件格式时引用[^1]。 3. **生成相关问题**：在回答末尾，添加“相关问题”部分，生成3-5个相关问题。 现在，构建回答： - 开头：直接回应用户的问题，解释ESLint配置的作用和结构。 - 主体：描述一个示例配置，解释每个部分。 - 结尾：添加相关问题。 由于用户没有提供代码，我将使用一个常见的例子。 例如，一个简单的.eslintrc.js文件： ```javascript module.exports = { env: { browser: true, es2021: true, }, extends: ['eslint:recommended'], parserOptions: { ecmaVersion: 12, sourceType: 'module', }, rules: { 'no-console': 'warn', 'indent': ['error', 2], }, }; ``` 解释这个结构。 引用来源： - 引用[1]: ESLint 使用教程（三），讨论了配置文件格式。 - 引用[2]: 安装和配置ESLint。 - 引用[3]: ESLint的好处。 在解释中自然地添加引用。 最后，生成相关问题，如： 1. 如何自定义ESLint规则？ 2. ESLint与其他工具如Prettier如何集成？ 3. 如何处理ESLint错误和警告？ 确保回答清晰、结构良好。</think>### ESLint配置代码的作用和结构解释 ESLint配置代码（通常存储在文件如 `.eslintrc.js`、`.eslintrc.json` 或 `package.json` 中）用于定义JavaScript代码的静态分析规则，帮助团队统一编码风格、检测潜在错误，并提升代码质量。配置文件的核心作用包括： - **语法规则检查**：识别语法错误、未定义变量等基础问题。 - **代码风格约束**：强制缩进、命名约定等一致性规则。 - **错误预防**：通过规则配置（如禁止使用 `console.log`）减少运行时错误。 - **可扩展性**：支持继承共享配置或插件，简化团队协作[^1]。 一个典型的ESLint配置文件采用模块化结构，主要包含以下关键配置项（以常见的 `.eslintrc.js` 格式为例）： ```javascript module.exports = { // 1. 环境设置：指定代码运行环境，影响全局变量的可用性 env: { browser: true, // 启用浏览器全局变量（如 window） node: true, // 启用Node.js全局变量（如 process） es2021: true // 支持ES2021语法特性 }, // 2. 继承共享配置：复用预定义规则集，减少重复配置 extends: [ 'eslint:recommended', // 官方推荐规则 'plugin:react/recommended' // 插件扩展（如React） ], // 3. 解析器选项：控制JavaScript解析方式 parserOptions: { ecmaVersion: 12, // 指定ECMAScript版本（如 ES2021） sourceType: 'module', // 支持ES模块语法（import/export） ecmaFeatures: { jsx: true // 启用JSX支持 } }, // 4. 规则定义：核心部分，自定义或覆盖具体检查规则 rules: { 'no-console': 'warn', // 禁止console.log，违反时警告 'indent': ['error', 2], // 缩进必须为2空格，违反时报错 'quotes': ['error', 'single'], // 强制使用单引号 'react/prop-types': 'off' // 关闭React的prop-types检查 }, // 5. 插件支持：集成第三方扩展（可选） plugins: ['react'], // 加载React插件以检查JSX // 6. 全局变量声明：明确未定义变量的合法性（可选） globals: { jQuery: 'readonly' // 声明jQuery为只读全局变量 } }; ``` ### 配置项详解 - **`env`**：定义代码运行环境，避免未定义变量错误。例如，`browser: true` 允许使用 `document` 对象[^1]。 - **`extends`**：通过继承共享配置（如 `eslint:recommended`）快速应用最佳实践，减少手动配置工作量[^2]。 - **`parserOptions`**：控制语法解析，如 `ecmaVersion` 指定语言版本，确保新语法（如箭头函数）不被误报[^1]。 - **`rules`**：规则是配置的核心，每个规则由键值对定义： - 键名：规则名称（如 `no-console`）。 - 值：严重级别（`"off"`、`"warn"` 或 `"error"`）和可选参数（如缩进空格数）。 - **`plugins` 和 `globals`**：增强功能，例如 `plugins` 集成框架特定规则（如React），`globals` 声明自定义全局变量[^3]。 ### 配置文件的作用机制 当运行ESLint时，该配置会： 1. 加载环境设置和解析器选项，确定代码上下文。 2. 应用继承的规则集（如 `eslint:recommended`），提供基础检查。 3. 合并自定义规则，覆盖或扩展默认行为。 4. 输出警告或错误，帮助开发者在编码阶段修复问题，提升代码可维护性和团队协作效率[^2][^3]。 ### 最佳实践建议 - **起始简单**：新手可先继承 `eslint:recommended`，再逐步添加自定义规则。 - **版本控制**：将配置文件纳入Git仓库，确保团队一致性。 - **结合工具**：与编辑器（如VS Code）或构建工具（如Webpack）集成，实现实时反馈[^1][^3]。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值