Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

233
Views
React Material UI Button component not working

I have installed create-react-app and material-ui/core and have proceeded to make a simple Button.

After adding the Button to App file and using command npm start I'd expect the button to show in the browser, instead I get Error invalid hook call.

The only issue I could think of is the dependencies may be corrupt as the hook is clearly valid.

Here is the simple Button: App.js

import {Button} from '@material-ui/core';

export default function App() {
  return (
    <div className="App">
        <Button>Click Me</Button>
    </div>
  );
}

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

Index.html

<div id='root'></div>

And here is the package.json file (dependencies only shown here to reduce code length):

{
  "name": "mui-play",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  }
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Solved: There was an issue with the dependencies, I learnt that even if you install an npm package you must still go to the terminal in the source code editor and install the dependency into the package.json file. Here is the fixed file that allows the button to be displayed in the browser: package.json:

  "name": "mui-play",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  }

The line "@material-ui/core": "^4.12.3", has been added so that the package can use the dependency.

about 4 years ago · Juan Pablo Isaza Report

0

try by adding the packages you want manually and then run npm install on the terminal enter image description here

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!