React项目中npm包出现Module not found错误但CodeSandbox可正常运行

我用CRA+TypeScript模板创建的React项目，安装并导入active-table-react组件后，运行npm start出现以下错误：

ERROR in ./node_modules/active-table/dist/activeTable.js 32:0-54
Module not found: Error: Can't resolve './activeTableStyle' in '/home/user/Projects/react-table-demo/node_modules/active-table/dist'
Did you mean 'activeTableStyle.js'?
BREAKING CHANGE: The request './activeTableStyle' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains "type": "module").
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

我试过更换Node和React版本，问题依旧，但官方示例运行正常，我的代码和示例完全一致：

// App.tsx

import React from 'react';
import './App.css';
import { ActiveTable } from 'active-table-react';

function App() {
  const content = [
    ["Planet", "Diameter", "Mass"],
    ["Earth", 12756, 5.97],
    ["Mars", 6792, 0.642]
  ];
  return (
    <div className="App">
      <ActiveTable
        content={content}
        headerStyles={{ default: { backgroundColor: "#d6d6d630" } }}
      />
    </div>
  );
}

export default App;

请问问题出在哪？

这个错误根源是active-table包内部的ESM模块引用缺少文件扩展名，而CRA默认的Webpack配置不会自动补全node_modules中ESM模块的文件扩展名，导致解析失败。以下是几种可行解决方法：

方法1：用react-app-rewired修改Webpack配置（推荐） #

1. 安装必要依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件，写入：

const { override, addWebpackResolve } = require('customize-cra');

module.exports = override(
  addWebpackResolve({
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  })
);

3. 修改package.json里的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 重新运行npm start即可。

方法2：手动修改依赖文件（临时方案） #

找到node_modules/active-table/dist/activeTable.js文件，将第32行的import './activeTableStyle'修改为import './activeTableStyle.js'。注意：此方法在重新安装依赖后会失效，仅适合临时验证问题。

方法3：反馈给官方等待修复 #

可以去active-table的代码仓库提交问题，告知这个ESM模块引用的缺陷，官方修复后更新包即可解决。

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