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

Failed to pile.

./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 './ponents/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}">
          Wele to Lumiere...
        </Button>
      </div>
    );
  }
}

export default LoginModal;

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

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

Failed to pile.

./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 './ponents/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}">
          Wele to Lumiere...
        </Button>
      </div>
    );
  }
}

export default LoginModal;

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

• javascript
• reactjs
• material-ui

• Can you show your imports for your LoginModal? – ic3b3rg Commented Dec 14, 2018 at 20:33
• @ic3b3rg I added it. – HuLu ViCa Commented Dec 14, 2018 at 20:34
• imports look good - try reinstalling your modules – ic3b3rg Commented Dec 14, 2018 at 20:38
• Run NPM i for the module. – TGarrett Commented Dec 14, 2018 at 21:56

4 Answers 4

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 pile again. If that doesn't work, try reinstalling all dependencies npm ci and pile again.

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.

Restarting the server solved my problem

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 i.e react, typescript, tailwind, mui and webpack all running on the latest version.

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