./src/App.js 找不到模块：无法解析 xxx 中的'@material-ui/data-grid'

Question

我构建了一个react+flask应用程序，我想使用Material UI我测试了按钮，它工作，我需要一个数据网格，一个表，我得到了这个错误：

./src/App.js
Module not found: Can't resolve '@material-ui/data-grid' in 'C:spvreactreact-flask-appsrc'

在控制台中，我得到了这个：

Uncaught Error: Cannot find module '@material-ui/data-grid'
at webpackMissingModule (App.css?4433:45)
at Module../src/App.js (App.css?4433:45)
at __webpack_require__ (bootstrap:784)
at fn (bootstrap:150)
at Module../src/index.js (index.css?f3f6:45)
at __webpack_require__ (bootstrap:784)
at fn (bootstrap:150)
at Object.1 (serviceWorker.js:141)
at __webpack_require__ (bootstrap:784)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1

这是代码：

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button';
import { DataGrid } from '@material-ui/data-grid';


function App() {
const columns = [
{ field: 'id', headerName: 'ID', width: 70 },
{ field: 'firstName', headerName: 'First name', width: 130 },
{ field: 'lastName', headerName: 'Last name', width: 130 },
{
field: 'age',
headerName: 'Age',
type: 'number',
width: 90,
},
{
field: 'fullName',
headerName: 'Full name',
description: 'This column has a value getter and is not sortable.',
sortable: false,
width: 160,
valueGetter: (params) =>
`${params.getValue('firstName') || ''} ${
params.getValue('lastName') || ''
}`,
},
];
const rows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];
useEffect(() => {
fetch('http://127.0.0.1:5000/formular',{
headers : { 
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}).then(response =>
response.json().then(data =>{
console.log(data);
})
);
},[]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
return <div className="App">
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" ></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css? 
family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />


<div style={{ height: 400, width: '100%' }}>
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
</div>

</div>;
}
export default App;

我尝试在cmd npm中安装@material-ui next或类似的东西，但它仍然无法导入网格。

请帮助

Answer 1

数据网格不包含在材料ui的核心安装中。

安装数据网格：

npm install @material-ui/data-grid

使用导入

import { DataGrid } from '@material-ui/data-grid'

Answer 2

数据网格没有默认安装。请参阅此处

您可以将其单独安装为：

npm install @material-ui/data-grid

并将其作为导入

import { DataGrid } from '@material-ui/data-grid';

Answer 3

遵循以下步骤：

1. 安装核心材料ui

   npm install @material-ui/core

2. 现在进入数据网格

   npm install @material-ui/data-grid

3. 那场演出成功了！

Answer 4

我还必须在package.json 中将react和react dom更改为v17.0.0

"反应"："17.0.0〃；

"react dom"："17.0.0〃；

Answer 5

使用此选项导入网格。这解决了我的问题，

import Grid from '@material-ui/core';

它还适用于Material ui Box、Paper、Link，为所有这些设置样式。像这样使用，

import { Grid, Link, makeStyles, Paper,Box, styled} from '@material-ui/core';

Answer 6

这意味着节点模块中缺少一些包/依赖项

要解决此问题npm install <missing-package-name>

在你的情况下npm install @material-ui/data-grid