使用create-react-app时JS未报错：未定义变量/错误导入问题咨询

导入错误/未完成导入无提示 #

1. ES模块转译特性：在create-react-app默认的Babel+webpack配置下，当导入不存在的模块或导出项时，webpack开发模式不会直接终止编译，而是将无效导入解析为空对象或undefined，Babel转译后也不会主动抛出运行时错误，导致代码继续执行。
2. ESLint检查失效：create-react-app默认自带的ESLint规则包含import/no-unresolved和import/named，如果这些规则被手动关闭，或是ESLint本身被禁用，就无法在编码阶段检测到导入错误。

使用未定义的函数/变量无提示 #

1. 非严格模式的隐式全局变量：若代码不在严格模式下运行（比如脱离ES模块环境的脚本），未定义的变量被赋值时会自动创建全局变量，不会抛出ReferenceError；即使在ES模块默认的严格模式下，若未定义变量仅被读取未赋值，部分环境可能未及时捕获错误。
2. ESLint的no-undef规则未启用：create-react-app默认开启no-undef规则，若该规则被关闭，ESLint不会在编码阶段提示未定义的标识符。
3. 错误边界的干扰：如果React组件中存在错误边界，可能会捕获渲染阶段的错误并展示 fallback UI，导致控制台的错误提示被隐藏，但代码逻辑中的未定义变量错误通常仍会在控制台显示。

针对导入错误 #

• 确保ESLint规则生效：检查项目根目录的.eslintrc或package.json中的ESLint配置，确认import/no-unresolved和import/named规则未被禁用，create-react-app默认的react-app规则集已包含这些检查。
• 启用webpack严格模块解析：create-react-app默认已配置该规则，若自定义过webpack配置，确保module.resolve.strictMode设为true，强制webpack对无效导入抛出错误。
• 切换为TypeScript：将项目转为TypeScript（运行npx create-react-app my-app --template typescript或手动配置），静态类型检查会在编译阶段检测到无效导入和导出，提前拦截错误。

针对未定义的函数/变量 #

• 确保严格模式运行：ES模块默认启用严格模式，无需额外添加'use strict'；若使用非模块脚本，手动在代码顶部添加'use strict'，强制未定义变量抛出ReferenceError。
• 启用ESLint的no-undef规则：检查ESLint配置，确保no-undef规则未被关闭，该规则会在编码阶段实时提示未定义的标识符。
• 查看浏览器控制台：忽略错误边界的干扰，直接查看浏览器控制台的Console标签页，运行时的ReferenceError通常会在这里显示，便于定位问题。
• 使用TypeScript：静态类型检查会在开发阶段检测到未定义的变量/函数，甚至在编辑器中实时提示，避免运行时错误。

内容的提问来源于stack exchange，提问作者coolest-duck