使用material-table时遇ENOENT文件缺失错误的求助

问题描述 #

运行npm start时触发以下错误：

ENOENT: no such file or directory, open 'C:\Users\35508\Desktop\myfolder\myapp\node_modules\react-double-scrollbar\dist\DoubleScrollbar.js.map'

使用material-table构建表格组件，已执行npm install react-double-scrollbar --save，且在package.json的start脚本前添加GENERATE_SOURCEMAP=false，但问题未解决。当前Node版本v18.13.0，npm版本8.19.3。

相关代码：

table.js #

// my table.js file
import React from "react";
import MaterialTable from "material-table";

const Table = () => {
  const data = [
    { name: "Praveen", age: 12 },
    { name: "Rahul", age: 12 },
    { name: "Suresh", age: 12 },
    { name: "Ramu", age: 15 },
  ];
  const columns = [
    { title: "Name", field: "name" },
    { title: "Age", field: "age" }
  ];
  return (
    <>
      <MaterialTable title="Material-Table" 
      data={data}
      columns={columns} />
    </>
  );
};
export default Table;

index.js #

// my index.js file 
import React from "react";
import ReactDOM from "react-dom";
import Table from './Table';
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
    <h1>Hello, world!</h1>
    <Table/>
  </>
);

解决方案 #

方案1：手动补全缺失的source map文件 #

1. 进入项目路径node_modules/react-double-scrollbar/dist/
2. 创建空文件并命名为DoubleScrollbar.js.map
3. 重新运行npm start

方案2：替换为维护活跃的替代库 #

react-double-scrollbar长期未更新，存在依赖缺失问题，可改用更稳定的替代方案：

1. 卸载旧库：npm uninstall react-double-scrollbar
2. 安装替代库（以react-scrollbar-size为例）：npm install react-scrollbar-size
3. 调整material-table配置，禁用内置滚动依赖或自定义滚动逻辑

方案3：修改webpack配置忽略source map查找 #

如果使用Create React App，需借助react-app-rewired修改配置：

1. 安装依赖：npm install react-app-rewired --save-dev
2. 项目根目录创建config-overrides.js，写入：

module.exports = function override(config, env) {
  // 关闭或修改source map规则，忽略缺失文件
  config.devtool = env === 'development' ? 'cheap-module-source-map' : false;
  return config;
};

3. 修改package.json的scripts：

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

4. 重新运行npm start

方案4：清除缓存并重装依赖 #

1. 删除node_modules文件夹和package-lock.json（Windows可手动删除或用rmdir /s node_modules命令）
2. 重新安装依赖：npm install
3. 再次启动项目：npm start

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