与 Material-UI 反应找不到模块

Question

I want to display a Material button with my React app, but I get this error:

Failed to compile.

./node_modules/@material-ui/core/styles/index.js
Module not found: Can't resolve '/Users/hugovillalobos/Documents/Code/LumiereProject/lumiere_frontend/node_modules/react-scripts/node_modules/babel-loader/lib/index.js' in '/Users/hugovillalobos/Documents/Code/LumiereProject/lumiere_frontend'

This is my App.js :

import React, { Component } from 'react';
import './App.css';
import LoginModal from './components/Login';

class App extends Component {
  render() {
    return (
      <div className="App">
        <LoginModal />
      </div>
    );
  }
}

export default App;

And this is my module:

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

class LoginModal extends Component {
  render() {
    return(
      <div>
        <Button variant="contained" className="{classes.Button}">
          Welcome to Lumiere...
        </Button>
      </div>
    );
  }
}

export default LoginModal;

Everything works fine, until I try to use Material components in my app. Maybe I am missing to install something, but the documentation I am following doesn't requiere anything in particular.

Answer 1

If you look closely at the error message, it says that the module it can't find is babel-loader ('/Users/hugovillalobos/Documents/Code/LumiereProject/lumiere_frontend/node_modules/react-scripts/node_modules/ babel-loader /lib/index.js').

Try running npm install --save babel-loader and compile again. If that doesn't work, try reinstalling all dependencies npm ci and compile again.

Answer 2

I encountered the same error. I installed Material-UI while my development server was still running. Restarting the server did the trick. I've noticed some packages don't "kick in" until you do this.

Answer 3

重启服务器解决了我的问题

Answer 4

I simply ran yarn add @material-ui/core -D for npm you would run npm install @material-ui/core --save-dev

Im running react 18.2 as of this writing ive upgraded my entire FE stack ie react, typescript, tailwind, mui and webpack all running on the latest version.

Heres my package.json if you want a quick reference copy pasta 🤌🏻

 "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/eslint-parser": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.17.12",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@headlessui/react": "^1.4.2",
    "@inertiajs/inertia": "^0.11.0",
    "@inertiajs/inertia-react": "^0.8.0",
    "@inertiajs/progress": "^0.2.6",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@material-ui/pickers": "^3.3.10",
    "@mui/icons-material": "^5.6.1",
    "@mui/lab": "^5.0.0-alpha.77",
    "@mui/material": "^5.6.1",
    "@mui/styles": "^5.8.4",
    "@mui/x-data-grid": "^5.9.0",
    "@npmcli/ci-detect": "^2.0.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0",
    "@tailwindcss/forms": "^0.5.2",
    "@testing-library/react": "^13.3.0",
    "@tsconfig/recommended": "^1.0.1",
    "@types/jest": "^28.1.3",
    "@types/node": "^18.0.0",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "@typescript-eslint/eslint-plugin": "^5.30.4",
    "@typescript-eslint/parser": "^5.29.0",
    "autoprefixer": "^10.4.7",
    "axios": "^0.27.2",
    "babel-loader": "^8.2.5",
    "browser-sync": "^2.27.9",
    "browser-sync-webpack-plugin": "^2.3.0",
    "date-fns": "^2.28.0",
    "draft-js": "^0.11.7",
    "draft-js-export-html": "^1.4.1",
    "draft-js-import-html": "^1.4.1",
    "eslint": "^8.19.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-tailwindcss": "^3.6.0",
    "eslint-plugin-testing-library": "^5.5.1",
    "eslint-plugin-unicorn": "^43.0.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^28.1.1",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "material-ui-dropzone": "^3.5.0",
    "moment": "^2.29.3",
    "mui-rte": "^2.0.1",
    "postcss": "^8.4.14",
    "postcss-import": "^14.0.2",
    "prettier": "^2.7.0",
    "react-helmet": "^6.1.0",
    "react-refresh": "^0.14.0",
    "stylus": "^0.58.1",
    "stylus-loader": "^7.0.0",
    "tailwindcss": "^3.1.4",
    "ts-jest": "^28.0.5",
    "ts-loader": "^9.3.1",
    "tsc": "^2.0.4",
    "tscheck": "^0.1.5",
    "tsconfig-paths": "^4.0.0",
    "typescript": "^4.7.3",
    "watchexec-bin": "^1.0.0",
    "zod": "^3.17.3"
  },