Require statement not part of import statement.(@typescript-eslint/no-var-requires)

已于 2023-04-27 15:25:11 修改
阅读量2.8w 收藏 17
点赞数 13
分类专栏： ESLint 文章标签： typescript vue.js javascript 前端
于 2021-01-04 10:47:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38290251/article/details/112170092
版权

目录

一、出现Require statement not part of import statement.(@typescript-eslint/no-var-requires)

二、error An unexpected error occurred: "https://github.com/eligrey/FileSaver.js.git/info/refs?service=git-upload-pack: connect ETIMEDOUT 20.205.243.166:443

三、Vue3 忽略 ts (TypeScript)的无故报错

四、Recommendation: math.div(1, 5) More info and automated migrator: https://sass-lang.com/d/slash-div

五、表单初始化数据提示 Property "xxx" was accessed during render but is not defined on instance. 

六、遍历提示错误 'v-model' directives cannot update the iteration variable itself

七、 npm报错：npm ERR! cb.apply is not a function

八、cnpm:无法加载文件，因此在此系统上禁止运行脚本。对注册表项的访问被拒绝。要更改默认作用域的执行策略，请使用“以管理员身份运行”选项启动window powershell。要更改当前用户的执行策略 

九、asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).打包文件体积过大 

一、出现Require statement not part of import statement.(@typescript-eslint/no-var-requires)

1、原因

当在项目中使用了vue、typescript、eslint 后，在vue.config.js 文件中：

const path = require('path')

会提示报错：

Require statement not part of import statement.(@typescript-eslint/no-var-requires)

require部分没有通过import引入，且是@typescript-eslint/no-var-requires检查规则造成。 

2、解决办法：

.eslintrc.js文件中的 rules 属性新增以下内容：

  rules: {
    '@typescript-eslint/no-var-requires': 0
  }

二、error An unexpected error occurred: "https://github.com/eligrey/FileSaver.js.git/info/refs?service=git-upload-pack: connect ETIMEDOUT 20.205.243.166:443

解决办法：

error An unexpected error occurred: “https://github.com/eligrey/FileSaver.js.git/info/refs?service=g_小草莓蹦蹦跳的博客-优快云博客

 

三、Vue3 忽略 ts (TypeScript)的无故报错

解决办法：

 Vue3 忽略 ts (TypeScript)的无故报错_忽略ts报错_小草莓蹦蹦跳的博客-优快云博客

 

四、Recommendation: math.div(1, 5) More info and automated migrator: https://sass-lang.com/d/slash-div

解决方法：

将 "sass": "^1.26.5",    替换为  "sass": "~1.26.5",

 

五、表单初始化数据提示 Property "xxx" was accessed during render but is not defined on instance. 

解决办法：

Vue3 实际项目踩坑+总结【汇总篇】_小草莓蹦蹦跳的博客-优快云博客

六、遍历提示错误 'v-model' directives cannot update the iteration variable itself

解决办法：

Vue3 实际项目踩坑+总结【汇总篇】_小草莓蹦蹦跳的博客-优快云博客 

七、 npm报错：npm ERR! cb.apply is not a function

npm报错：npm ERR! cb.apply is not a function_小草莓蹦蹦跳的博客-优快云博客 

八、cnpm:无法加载文件，因此在此系统上禁止运行脚本。对注册表项的访问被拒绝。要更改默认作用域的执行策略，请使用“以管理员身份运行”选项启动window powershell。要更改当前用户的执行策略 

cnpm:无法加载文件，因此在此系统上禁止运行脚本。对注册表项的访问被拒绝。要更改默认作用域的执行策略，请使用“以管理员身份运行”选项启动window powershell。要更改当前用户的执行策略_小草莓蹦蹦跳的博客-优快云博客

九、asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).打包文件体积过大 

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).打包文件体积过大_小草莓蹦蹦跳的博客-优快云博客 

 

Node.js项目TypeScript改造指南
Q_2625289483的博客
12-10 2805
前言 如果你有一个 Node.js 项目，并想使用 TypeScript 进行改造，那本文对你或许会有帮助。 TypeScript 越来越火，本文不讲为什么要使用 TypeScript，也不讲基本概念。本文讲的是如何将一个旧的 Node.js 项目使用 TypeScript 进行改造，包括目录结构调整、TypeScript-ESLint 配置、tsconfig 配置、调试、常见错误处理等。 由于篇...
Vue+TypeScript+ElementUI 实战 （四）全局设置
梅花寺
06-20 1420
配置不同环境变量可避免切换不同环境时手动修改项目配置，请求url等在文件中这样设置： 1.2 在根目录创建.env文件 注意：.env文件是环境配置，不允许胡乱命名 .env.production .env.test 要点 文件中的默认属性有 和 添加的属性名必须以 开头，如： 可以通过 在任何地方访问到当前环境配置属性 1.3 获取属性 2、SCSS配置 2.1 样式初始化 作用： 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显
引用require插件报错问题，Require statement not part of import statement.(@typescript-eslint/no-var-requires)
会点php的前端小渣渣
02-14 1574
var shell = require('shelljs'); 提示报错： Require statement not part of import statement.eslint@typescript-eslint/no-var-requires 解决方案： .eslintrc.js中的 rules 属性新增以下内容： rules: {undefined '@typescript-eslint/no-var-requires': 0 } ...
Require statement not part of import statement @typescript-eslint/no-var-requires
m0_50207524的博客
03-31 870
【代码】Require statement not part of import statement @typescript-eslint/no-var-requires。
报错 | 配置 postcss 出现 报错：A `require()` style import is forbidden.
最新发布
weixin_42479421的博客
04-21 853
另外，/* eslint-env node */生效了。：Vite 本身使用的是现代浏览器和 ESBuild（支持原生 ESM），安装 each 后， 测试，发现，成功显示！注：再不行，考虑本文中的 统一使用es模块方法（改写），而不是直接由 Node.js 来执行源代码；，比如 postcss.config.mjs。翻译：禁止导入require（）样式。本次使用的是 es 模块（ESM）等），这些都基于 ESM 开发。依赖中使用了很多现代插件（如。，官方推荐使用现代模块格式。是合法的（不会报未定义）
error: Require statement not part of import statement (@typescript-eslint/no-var-requires)
快乐肥宅的学习室
12-13 6523
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) 目录error: Require statement not part of import statement (@typescript-eslint/no-var-requires)问题描述解决方法 问题描述 项目中使用了vue、typescript、eslint，在vue.config.js中使用以下语句时： const n
Require statement not part of import statement. eslint@typescript-eslint/no-var-requires报错修改
码飞_CC的博客
04-09 4079
修改.eslintrc.js文件的配置即可： module.exports = { ... rules: { ... '@typescript-eslint/no-var-requires': 0, } }
ts + vue3 + cli使用require报错
qq_41910359的博客
06-05 1327
ESLint: Require statement not part of import statement.(@typescript-eslint/no-var-requires)
More info and automated migrator: https://sass-lang.com/d/slash-div
qq_36258899的博客
07-15 5136
sass
从0开始搭建一个Vue3.x企业级项目骨架
一碗周
03-14 1476
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 写在前面 本篇文章将从0开始搭建一个企业可用的项目骨架，这里我使用的包管理工具时Yarn，别问为什么，问就是喜欢用这个；如果你是npm的话，直接将yarn add全部替换为npm i即可（废话文学）。 通过Vite安装Vue3项目 安装比较简单，首先输入命令 npm create vite 然后会让你输入项目名称 第三步让你选择一个框架，这里选择Vue 最后一步我们选择vue-ts，也就是Vue+Type.
vue3+ts+vite配置commit提交代码时语法检测
周家大小姐
02-08 1182
在 package.json 中配置lint-staged注：这里 lint-staged 的配置是：在 git 的待提交的文件中，在 src 目录下的所有都要执行的命令。
ES6_30分钟速读_新特性
pre_eminent的JAVA学习园地
05-03 3544
ECMAScript 2015 FeaturesES6 包含了以下这些新特性：Arrows 箭头函数Classes 类Enhanced Object Literals 增强的对象字面量Template Strings 模板字符串Destructuring 解构Default + Rest + Spread 默认参数+不定参数+参数展开Let + Const 操作符Iterators 迭代器 + F...
error An unexpected error occurred: “https://github.com/eligrey/FileSaver.js.git/info/refs?service=g
小草莓的博客
04-26 1926
在yarn 或者 npm install 安装依赖的时候，报错： error An unexpected error occurred: "https://github.com/eligrey/FileSaver.js.git/info/refs?service=git-upload-pack: connect ETIMEDOUT 20.205.243.166:443 解决办法： 在C:\Windows\System32\drivers\etc路径下找到hosts 文件： 打开该文件，
如何解决用ESLint验证导致报错的问题
艾米的猫儿的博客
12-23 4861
如何解决用ESLint验证导致报错的问题
vue安装依赖后sass大量警告报错
a329715712的博客
01-30 3300
vue sass 版本出现大量警告报错
error An unexpected error occurred: “https://raw.githubusercontent.com/eligrey/FileSaver.js/e865e37a
weixin_43824829的博客
05-09 1530
解决方法： 在C:\Windows\System32\drivers\etc路径下找到hosts文件 添加 以下内容： 199.232.68.133 raw.githubusercontent.com
vue启动报错
qq_42766445的博客
07-05 1198
解决vue启动报错问题
‘vue-cli-service‘ 不是内部或外部命令，Cannot read properties of null (reading ‘pickAlgorithm‘)_（2022-04-06）
鲁迷那的专栏—坚持实践后再写出来！
04-06 8234
报错信息： 报错1： 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。 报错2： Cannot read properties of null (reading ‘pickAlgorithm‘) Windows PowerShell 版权所有 (C) Microsoft Corporation。保留所有权利。 尝试新的跨平台 PowerShell https://aka.ms/pscore6 PS D:\workspace\zsh_code..
vue3-webpack遇到Eslint各种报错
tiger_Angle
11-11 5079
报错一：：与创建项目时选择的 eslint 的设置问题，可以通过“—fix”选项修复：//原代码报错二：提示建议我们使用特殊注释禁用某些警告。使用//eslint disable next line忽略下一行。使用//忽略文件中的所有警告。
webpack3 升级5 报错Parsing error: require() of ES Module /Users/fanxiguo/project/offsite-curing-mpaas1/node_modules/_eslint-scope@7.2.2@eslint-scope/lib/definition.js from /Users/fanxiguo/project/offsite-curing-mpaas1/node_modules/_babel-eslint@10.1.0@babel-eslint/lib/require-from-eslint.js not supported. Instead change the require of definition.js in /Users/fanxiguo/project/offsite-curing-mpaas1/node_modules/_babel-eslint@10.1.0@babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules
03-18
<think>好的，我现在需要帮助用户解决在将Webpack 3升级到Webpack 5时遇到的ES Module解析错误。用户提供的错误信息显示，问题出现在`babel-eslint`和`eslint-scope`之间的模块导入问题，具体是CommonJS的`require`无法正确导入ES模块。 首先，我需要确定这个错误的核心原因。根据错误信息，`eslint-scope@7.2.2`的`definition.js`是一个ES模块，而`babel-eslint@10.1.0`尝试用`require`来导入它，这在Node.js中是不支持的，因为ES模块需要使用`import`语句或动态导入`import()`。这通常发生在较旧的包依赖了新的ES模块格式的包，导致兼容性问题。 接下来，我需要考虑用户可能的环境。用户之前已经从Webpack 3升级到5，可能已经调整了一些配置，但可能还存在一些遗留的依赖问题。尤其是`babel-eslint`已经不再维护，官方推荐迁移到`@babel/eslint-parser`，所以这可能是导致问题的关键点。 解决方案方面，首先应该升级或替换掉有问题的包。比如，将`babel-eslint`升级到`@babel/eslint-parser`，并且确保相关的ESLint配置更新。同时，检查`eslint`和相关插件的版本是否兼容，可能需要升级到较新的版本，因为旧版本的ESLint可能不支持新的解析器或ES模块格式。 另外，用户可能需要更新他们的`.eslintrc`配置文件，替换解析器为`@babel/eslint-parser`，并添加必要的配置选项，如`requireConfigFile`设置为`false`，如果项目中没有Babel配置文件的话。同时，确保`parserOptions`中的`ecmaVersion`和`sourceType`正确设置，以支持ES模块。 还要考虑其他可能的依赖冲突，比如`eslint-scope`的版本是否与新的解析器兼容。如果升级后仍然存在问题，可能需要进一步检查`eslint-plugin`或其他相关插件是否需要更新，或者是否存在版本间的冲突，这时候使用`npm ls eslint-scope`可以帮助查看依赖树，确定是否有多个版本被安装，导致冲突。 如果用户暂时无法升级所有依赖，可能需要寻找临时解决方案，比如降级`eslint-scope`到兼容CommonJS的版本，但这不是长久之计。另外，在升级过程中，用户应该逐步进行，逐个解决每个错误，避免同时处理多个问题导致混乱。 最后，验证解决方案是否有效，用户需要清除`node_modules`和`package-lock.json`，重新安装依赖，并运行构建命令，确保没有新的错误出现。同时，建议用户查看官方迁移指南，确保其他配置和插件也兼容Webpack 5和最新的工具链。</think>--- ### 错误核心原因 **ES Module与CommonJS的兼容性冲突**： Node.js环境中，使用`require()`加载ES模块格式（`.mjs`或`type: "module"`的包）会触发此错误。`babel-eslint@10.1.0`依赖旧的CommonJS语法，而`eslint-scope@7.2.2`已升级为ES Module格式，导致模块加载失败。 --- ### 分步解决方案 #### ▶ 第一步：升级过时依赖链 ```bash # 移除旧版 babel-eslint（已废弃） npm uninstall babel-eslint # 安装官方推荐的替代品 @babel/eslint-parser npm install @babel/eslint-parser@7.22.11 @babel/core@7.22.11 --save-dev # 升级 eslint 及相关工具链 npm install eslint@8.56.0 eslint-webpack-plugin@4.0.1 --save-dev ``` #### ▶ 第二步：修改ESLint配置 ```javascript // .eslintrc 或 eslint.config.js { "parser": "@babel/eslint-parser", // 替换原 babel-eslint "parserOptions": { "ecmaVersion": "latest", "sourceType": "module", "requireConfigFile": false // 若项目无.babelrc则需添加 } } ``` #### ▶ 第三步：处理动态导入兼容性 若仍需要兼容`require()`语法（如旧插件）： ```javascript // webpack.config.js module.exports = { // ... module: { parser: { javascript: { dynamicImportMode: 'eager' // 强制兼容动态导入 } } } } ``` #### ▶ 第四步：版本兼容性验证 | 依赖包 | 最低兼容版本 | 说明 | |--------------------|---------------|----------------------| | @babel/eslint-parser | ≥7.18.0 | 支持ES2020+语法 | | eslint | ≥8.0.0 | 必需适配ES Module | | webpack | ≥5.76.0 | 原生支持ES Module构建 | --- ### 关键问题排查点 1. **依赖树冲突检查**： ```bash # 检查是否存在多版本 eslint-scope npm ls eslint-scope ``` *若存在多个版本，需统一升级至≥7.2.2* 2. **缓存清理**： ```bash rm -rf node_modules/.cache npm cache clean --force ``` 3. **TypeScript项目特殊处理**： ```javascript // 若项目含TS，需额外配置 { "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended" ] } ``` --- ### 备选方案（临时修复） 若无法立即升级： ```javascript // 在webpack配置中降级处理（不推荐） module.exports = { resolve: { alias: { 'eslint-scope': 'eslint-scope@6.0.0' // 强制使用CommonJS版本 } } } ``` --- ### 最终验证 1. **运行ESLint检查**： ```bash npx eslint --ext .js,.vue src/ ``` 2. **构建测试**： ```bash npm run build -- --mode development ``` 3. **检查控制台输出**，确认无`require() of ES Module`相关报错。 --- **升级后优势**： - 支持`import()`动态语法 - 兼容Node.js 18+和M1/M2芯片 - 符合现代前端工程规范
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值