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

Posted 2023-02-22

【中文标题】./src/App.js 模块未找到：无法解析 xxx 中的“@material-ui/data-grid”

【英文标题】：./src/App.js Module not found: Can't resolve '@material-ui/data-grid' in xxx

【发布时间】：2021-01-22 07:42:52

【问题描述】：

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

./src/App.js
Module not found: Can't resolve '@material-ui/data-grid' in 'C:\spvreact\react-flask-app\src'

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

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 install @material-ui next 或类似的东西中，但它仍然没有导入网格。

请帮忙

【问题讨论】：

试过重新安装包吗？您是否正确安装了'@material-ui/data-grid' 包？

谢谢它的工作，我想如果我下载@material-ui它会下载所有组件。

【参考方案1】：

data-grid 不包含在 material-ui 的核心安装中。

安装数据网格：

npm install @material-ui/data-grid

通过以下方式导入：

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

【参考方案2】：

使用它来导入网格。这解决了我的问题，

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

它也适用于 Material-ui Box、Paper、Link，所有样式。 像这样使用，

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

【参考方案3】：

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

解决这个问题 npm run <missing-package-name>

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

【参考方案4】：

默认安装不附带数据网格。 参考here

您可以单独安装它：

npm install @material-ui/data-grid

并将其导入为

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

【讨论】：

应该是npm install --save @material-ui/data-grid

【参考方案5】：

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

“反应”：“^17.0.0”

"react-dom": "^17.0.0"

【参考方案6】：

按照以下步骤操作：

安装核心素材-ui

npm install @material-ui/core

现在安装数据网格

npm install @material-ui/data-grid

该节目已达成交易！