反应材料表

Question

this is my app.js code:

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

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

export default App;

and this is my table component

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} />;
};

when i'm running "npm start" I got blank white page with nothing. this is the WARNING:

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

it's seems like there is a missed file called: DoubleScrollbar.js.map I look online for some similar questions, I actually didn't find anything. If I switch line 7 in App.js to comment, I can see the header "pods table" I'm using node version 17.5.0

thank you!

Answer 1

Add the file directly from here:

https://github.com/umchee/react-double-scrollbar/blob/master/dist/DoubleScrollbar.js.map

I also recommend to revert to a previous version of material-table.

npm uninstall material-table
npm install material-table@1.69.3 --save

The latest version seems to have many bugs

Answer 2

我也遇到了这个错误，我使用的是最新版本 2.0.3，但后来我恢复到旧版本 1.69.3。