反应材料表

Question

这是我的 app.js 代码：

import { BasicTable } from './tables/BasicTable';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>pods table</h1>
      <BasicTable/>
    </div>
  );
}

export default App;

这是我的表格组件，

import MaterialTable from "material-table";

const data = [
    { name: "Mohammad", surname: "Faisal", birthYear: 1995 },
    { name: "Nayeem Raihan ", surname: "Shuvo", birthYear: 1994 },
];

const columns = [
    { title: "Name", field: "name" },
    { title: "Surname", field: "surname" },
    { title: "Birth Year", field: "birthYear", type: "numeric" },
];

export const BasicTable = () => {
    return <MaterialTable title="Basic Table" columns={columns} data={data} />;
};

当我运行“npm start”时，我得到了空白的白页，什么也没有。 这是警告：

Failed to parse source map from 'C:\Users\arechavia\Documents\podsApp\client\node_modules\react-double-scrollbar\dist\DoubleScrollbar.js.map' file: Error: ENOENT: no such file or directory, open 'C:\Users\arechavia\Documents\podsApp\client\node_modules\react-double-scrollbar\dist\DoubleScrollbar.js.map'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

assets by status 691 KiB [cached] 4 assets
assets by status 7.31 MiB [emitted]
  assets by chunk 7.31 MiB (name: main)
    asset static/js/bundle.js 7.31 MiB [emitted] (name: main) 1 related asset
    asset main.2bded4e24a742e77ef54.hot-update.js 3.23 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
  assets by path *.json 1.43 KiB
    asset asset-manifest.json 1.41 KiB [emitted]
    asset main.2bded4e24a742e77ef54.hot-update.json 28 bytes [emitted] [immutable] [hmr]
  asset index.html 1.67 KiB [emitted]
Entrypoint main 7.31 MiB (6.63 MiB) = static/js/bundle.js 7.31 MiB main.2bded4e24a742e77ef54.hot-update.js 3.23 KiB 2 auxiliary assets
cached modules 6.1 MiB [cached] 1383 modules
runtime modules 32.8 KiB 17 modules
./src/App.js 1.74 KiB [built] [code generated]

WARNING in ./node_modules/react-double-scrollbar/dist/DoubleScrollbar.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\arechavia\Documents\podsApp\client\node_modules\react-double-scrollbar\dist\DoubleScrollbar.js.map' file: Error: ENOENT: no such file or directory, open 'C:\Users\arechavia\Documents\podsApp\client\node_modules\react-double-scrollbar\dist\DoubleScrollbar.js.map'
 @ ./node_modules/material-table/dist/material-table.js 42:51-84
 @ ./node_modules/material-table/dist/index.js 29:44-71
 @ ./src/tables/BasicTable.jsx 4:0-43 27:30-43
 @ ./src/App.js 4:0-49 17:35-45
 @ ./src/index.js 7:0-24 11:33-36

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.71.0 compiled with 1 warning in 504 ms

似乎缺少一个名为：DoubleScrollbar.js.map 的文件 我在网上查了一些类似的问题，实际上我没有找到任何东西。 如果我将 App.js 中的第 7 行切换为注释，我可以看到标题“pods table” 我正在使用节点版本 17.5.0

谢谢！

Answer 1

直接从此处添加文件：

我也建议您还原为以前的材料泰式版本。

npm uninstall material-table
npm install [email protected] --save

最新版本似乎有很多错误