React项目安装bootstrap@4.1.0报non-JS module弃用错误该如何处理

完全不需要放弃在React应用中使用Bootstrap，该报错与Bootstrap本身无关，是配置和浏览器提示叠加导致的问题，按以下步骤修复即可：

核心问题定位 #

你当前webpack配置中错误地为全局CSS规则开启了CSS Modules：针对cssRegex匹配的普通全局CSS文件，你添加了modules:true配置，这会导致第三方库（包括Bootstrap）的全局CSS被错误当作CSS Modules处理，类名被哈希改写，同时触发了Chrome的相关提示。

crbug/1173575, non-JS module files deprecated.
这个提示是Chrome 88+版本的内置过时警告，本身不属于代码错误，不影响实际运行。

修复方案 #

• 修正webpack CSS配置：将modules:true配置从cssRegex对应的规则中移除，仅保留在cssModuleRegex（匹配.module.css后缀的CSS模块文件）对应的规则内，修改后的全局CSS规则如下：

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
  }),
  sideEffects: true,
}

• 若要消除Chrome的过时提示，可打开Chrome的chrome://flags/页面，找到「Experimental Web Platform features」选项，将其设置为Disabled后重启浏览器即可。
• 也可直接更换为react-bootstrap库使用，这是Bootstrap官方适配React的封装版本，无需手动引入jQuery、popper.js，完全适配React组件化开发模式，也能避开上述全局CSS配置问题。
• 如果你使用的是未eject的Create React App项目，不建议直接修改react-scripts包内的配置，可直接在项目入口HTML中引入Bootstrap的CDN CSS资源，也能快速解决问题。

内容的提问来源于stack exchange，提问作者Preethi