The hook call at the Material UI TextField component is not valid

Hello, I am currently working on a personal project and encountering a delay due to the following error message:

react-refresh-runtime.development.js:315 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   at resolveDispatcher (react.development.js:1476:1)
   at Object.useContext (react.development.js:1484:1)
   at useTheme (useTheme.js:4:1)
   at useStyles (makeStyles.js:222:1)
   at WithStyles (withStyles.js:55:1)
   at renderWithHooks (react-dom.development.js:16305:1)
   at updateForwardRef (react-dom.development.js:19226:1)
   at beginWork (react-dom.development.js:21636:1)
   at beginWork$1 (react-dom.development.js:27426:1)
   at performUnitOfWork (react-dom.development.js:26557:1)

I am trying to integrate material-ui components into a login page within my project. Previously, everything was functioning correctly, but now I am encountering this error without any clear indication of why or how to resolve it. The login page renders with a basic HTML input field, but adding a material-ui textfield triggers the invalid hook call.

The relevant code snippet is provided below:

import React, { useState } from "react";
import { loginUser } from "../redux/user";
import { useSelector, useDispatch } from "react-redux";
import { Button, TextField } from "@material-ui/core";

const Login = () => {
  const dispatch = useDispatch();
  const { user, status } = useSelector((state) => state.user);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const login = async () => {
    let obj = { email, password };
    await dispatch(loginUser({ obj: obj }));
    await console.log(user);
    await console.log(status);
  };

  return (
    <div>
      <TextField />
    </div>
  );
};

export default Login;

The package.json configuration is provided for reference:

  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.3",
    "@mui/material": "^5.10.3",
    "@reduxjs/toolkit": "^1.8.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

Your guidance in resolving this issue would be greatly appreciated. Thank you in advance.

Edit: Additional code has been included upon request.

Index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import store from "./redux/store";
import { Provider } from "react-redux";

import Login from "./pages/Login";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/login" element={<Login />} />
          <Route
            path="*"
            element={
              <main>
                <p>Oops, you went to wrong route. Please try another.</p>
              </main>
            }
          />
        </Routes>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

userSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

export const loginUser = createAsyncThunk("user/Login", async ({ obj }) => {
  return axios
    .post("http://127.0.0.1:8000/api/login", {
      email: obj.email,
      password: obj.password,
    })
    .then(function (response) {
      return response.data;
    })
    .catch(function (error) {
      console.log(error);
    });
});

export const userSlice = createSlice({
  name: "user",
  initialState: {
    user: null,
    status: null,
  },
  extraReducers: {
    [loginUser.pending]: (state, action) => {
      state.status = "loading";
    },
    [loginUser.fulfilled]: (state, action) => {
      state.user = action.payload;
      state.status = "success";
    },
    [loginUser.rejected]: (state, action) => {
      state.status = "rejected";
    },
  },
});

// Action creators are generated for each case reducer function

export default userSlice.reducer;

npm ls react

+-- @emotion/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="483a2d292b3c087979667978667c">[email protected]</a>
| +-- @emotion/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87f2f4e2aaeee9f4e2f5f3eee8e9aae2e1e1e2e4f3aaf0eef3efaae1e6ebebe5e6e4ecf4c7b6a9b7a9b7">[email protected]</a>
| | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f68493979582b6c7ced8c4d8c6">[email protected]</a> deduped
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5022353133241061687e627e60">[email protected]</a> deduped
+-- @emotion/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f685828f9a9392b6c7c7d8c7c6d8c2">[email protected]</a>
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e1c0b0f0d1a2e5f56405c405e">[email protected]</a> deduped
+-- @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="137a707c7d603e7e726776617a727f53263d22233d20">[email protected]</a>
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3a1b6b2b0a793e2ebfde1fde3">[email protected]</a> deduped
+-- @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2944485d4c5b404845691c071819071a">[email protected]</a>
| +-- @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e280839187a2d7ccd2ccd2cf838e928a83ccdbd7">[email protected]</a>
| | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dba9bebab8af9beae3f5e9f5eb">[email protected]</a> deduped
| +-- @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3043494344555d70051e01001e03">[email protected]</a>
| | +-- @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="78080a110e190c1d550c101d1511161f384d564948564b">[email protected]</a>
| | | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bdcfd8dcdec9fd8c85938f938d">[email protected]</a> deduped
| | +-- @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e3d3a37222b2a632b202927202b0e7b607f7e607d">[email protected]</a>
| | | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a5b2b6b4a397e6eff9e5f9e7">[email protected]</a> deduped
| | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acdec9cdcfd8ec9d94829e829c">[email protected]</a> deduped
| +-- @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed989984819eadd8c3dcddc3de">[email protected]</a>
| | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccbea9adafb88cfdf4e2fee2fc">[email protected]</a> deduped
| +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f5d4a4e4c5b025b5d4e415c465b46404102485d405a5f6f1b011b011a">[email protected]</a>
| | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2e393d3f281c6d64726e726c">[email protected]</a> deduped
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2c0d7d3d1c6f2838a9c809c82">[email protected]</a> deduped
+-- @reduxjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="166279797a7d7f625627382e3823">[email protected]</a>
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4d6c1c5c7d0e4959c8a968a94">[email protected]</a> deduped
+-- @testing-library/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26544347455266171508150816">[email protected]</a>
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99ebfcf8faedd9a8a1b7abb7a9">[email protected]</a> deduped
+-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9cbdcd8dacd94ddd6d4f98881978b9789">[email protected]</a>
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe8c9b9f9d8abecfc6d0ccd0ce">[email protected]</a> deduped
+-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4d6c1c5c7d089d6c1c0d1dce49c8a948a96">[email protected]</a>
| +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55273034362115646d7b677b65">[email protected]</a> deduped
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e89d9b8dc59b91868bc58d909c8d9a868984c59b9c879a8da8d9c6dac6d8">[email protected]</a>
|   `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196b7c787a6d592821372b3729">[email protected]</a> deduped
+-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34465155574019465b4140514619505b5974021a071a04">[email protected]</a>
| +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9dbccc8cadd84dbc6dcddccdbe99f879a8799">[email protected]</a>
| | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c5e494d4f586c1d14021e021c">[email protected]</a> deduped
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03716662607743323b2d312d33">[email protected]</a> deduped
+-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d2c5c1c3d48dd3c3d2c9d0d4d3e0958e908e91">[email protected]</a>
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26544347455266171e08140816">[email protected]</a> deduped
`-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b091e1a180f3b4a435549554b">[email protected]</a>
reactjsreact-hooksmaterial-ui

Answer №1

After some investigation, I stumbled upon the solution. It turns out that the issue lied with the material-ui components. Instead of calling them with 

import { ButtonBase } from "@material-ui/core";
, they should have been called like this: 
import TextField from "@mui/material/TextField";

I will also make sure to fix the asynchronous functions in the component. Many thanks for all the assistance and best wishes!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React Higher Order Component (HOC) encountered an ESLint issue: spreading props is not

Does eslint lack intelligence? The Higher Order Component (HOC) is quite generic, so I struggle to specify the incoming options/props as they are dynamic based on the component being wrapped by this HOC at any given time. I am encountering an error statin ...

javascriptreactjseslint

Error in TypeScript: Objects can only specify properties that are known, and 'state' is not found in type 'Partial<Path>'

As I strive to pass props through a React Router Link, my goal is to include all the user props. The code below is causing an error, particularly where state: {...employee} is highlighted. Although I am relatively new to TypeScript, I am actively working ...

reactjstypescripttypesreact-router

Tips for organizing API's in Next.js v14 using Server Components and the App router?

Hello fellow developers! I recently completed the tutorial on Next.js and I have a query regarding APIs. After reading through this documentation page, it seems like API routes should be located in a subfolder or route corresponding to the page they will ...

reactjsnext.jsfile-structurereact-server-components

What is the best way to utilize Gulp and Browserify for my JavaScript application?

Looking to modernize my app with a new build system and I could use some guidance. It seems like I need to shift my approach in a few ways. Here's the current structure of my app: /src /components /Base /App.jsx /Pages.jsx /. ...

javascriptnode.jsmodulereactjsgulp

Use React to increment a variable by a random value until it reaches a specific threshold

I am currently working on creating a simulated loading bar, similar to the one seen on YouTube videos. My goal is for it to last 1.5 seconds, which is the average time it takes for my page to load. However, I have encountered an issue with the following co ...

javascriptreactjs

What is the reason for all the buttons activating the same component instead of triggering separate components for each button?

I am facing an issue with my parent component that has 3 buttons and 3 children components. Each button is supposed to open a specific child component, but currently all the buttons are opening the same child component when clicked. The children components ...

javascriptreactjsmaterial-ui

A guide to creating a dynamic form using Material-UI components in React Redux: How can I easily add and manage input fields?

Currently, I am in the process of updating my code from a React-Flux-Bootstrap application to Redux with Material-ui. My main goal is to create a form that initially has one input field (e.g., title) and then allows users to add multiple extra inputs by cl ...

reactjsreduxmaterial-ui

Ensuring Tab Input Validation in ReactJs with the Help of Form Validator

After browsing through some Q&A, I stumbled upon a thread on the topic of Tabbed form and validation. Although it was close to addressing my issue, it did not provide a solution. I am currently utilizing react-material-ui-form-validator. When multiple ...

reactjsformsvalidationtabsmaterial-ui

I am facing difficulties installing libraries in my react-native project

Maybe the issue lies within cocoapods or there's a problem in my JSON. Oddly, no errors are showing up in the code. Whenever I attempt to install any library using yarn, I encounter this: purrweb@192 awesomeProject % yarn add react-native-image-pi ...

reactjsreact-nativenpmcocoapodshadoop-yarn

What is the best way to pass down SectionList prop types in TypeScript when using React?

I am working on creating a wrapper for SectionList in React Native that needs to accept all the standard props of SectionList along with some custom ones. How can I set up typescript to accommodate this? Here is what I have tried: import React from &apos ...

reactjstypescriptreact-nativereact-props

Ensure that ExpansionPanel remains expanded while printing

Currently, I am utilizing an ExpansionPanel in my project where the state of expansion is controlled based on certain conditions. However, I have a requirement for the ExpansionPanel to remain expanded at all times when the user initiates the printing pro ...

reactjsprintingmaterial-ui

The localhost is not updating on subsequent runs of npm run dev after the initial run

Every time I launch npm run dev (for my nextjs application), it functions properly on the initial run. However, after making modifications to my files, saving them, and checking my localhost, the changes do not appear. What is the solution? Currently, I f ...

reactjsnode.jsnpmnext.js

MUI full screen dialog with material-table

Issue: When I click a button on my material-table, it opens a full-screen dialog. However, after closing the dialog, I am unable to interact with any other elements on the screen. The dialog's wrapper container seems to be blocking the entire screen. ...

javascriptreactjsmaterial-ui

Exploring the asynchronous nature of componentDidMount and triggering a re-render with force

I am puzzled by the behavior in the code provided. The async componentDidMount method seems to run forceUpdate only after waiting for the funcLazyLoad promise to be resolved. Typically, I would expect forceUpdate to wait for promise resolution only when wr ...

javascriptreactjsasync-await

What is the process for updating a particular index in a list?

Currently, I am delving into React by working on a task master app. The concept is simple - each user input becomes a new task in an array of tasks. The app features Add, Delete, and Update buttons for managing these tasks. Everything is functioning smoot ...

javascriptreactjs

Guide to extracting information from a JSON response with the fetch API

Issue trying to display JSON response after API call using fetch. Response visible in Chrome's response tab, but not found in fetch response object. Client side import React from 'react'; import './App.css'; class App extends ...

node.jsreactjsexpress

How can we implement :focus-within styling on Material-UI Select when the input is clicked?

I am currently implementing a Select component inside a div element: <div className="custom-filter custom-filter-data"> <DateRangeIcon className="search-icon"/> <FormControl variant='standard& ...

javascriptreactjsmaterial-ui

Troubleshooting problem in pre-rendering with Algolia connectSearchBox in NextJS React

I am currently developing a custom SearchBox component for Algolia instant search with react. Here is the code for my implementation: import { connectSearchBox } from "react-instantsearch-dom"; import InputText from "components/common/Input ...

reactjsnext.jsalgoliareact-instantsearch

the <MapView/> component in react-native-maps cannot be displayed

I am attempting to display a native map using the coordinates from the example but encountering an error: *note using iOS and a real device for debugging ERROR: Could not inset compass from edges 9 Could not inset scale from edge Could not inset legal ...

reactjsreact-nativereact-native-iosreact-native-maps

Issue encountered when using exports in a React project - Uncaught ReferenceError: exports is not recognized

Recently, as I began my journey with React.js, I encountered a perplexing error. Within my project, there is a file that exports a function in the following format: exports.building = { //... //Something goes here... }; To import this function, I uti ...

javascriptreactjs