Next.JS: Cannot find module '@emotion/react'

Issue

I’ve been using Next.JS to make a test project to learn the framework. So far so good until I decided to use MUI to create a table so using npm I installed @mui/material @emotion/react and @emotion/styled but when it comes to render the table Next gives me the error described in the title.

"dependencies": {
  "@emotion/react": "^11.8.1",
  "@emotion/styled": "^11.8.1",
  "@mui/material": "^5.6.1",
  "axios": "^0.26.1",
  "next": "12.1.4",
  "react": "18.0.0",
  "react-dom": "18.0.0"
 },

These are my dependencies in package.json, I tried downgrading @emotion/react from 11.9.0 to 11.8.1 to see if it was the version but still I get the same error. Below the code of the table just to let you know what I’m trying to do.

import { Table, TableBody, TableHead, TableCell, TableRow, TableContainer } from "@mui/material";
   export default function Authors({authors}){
     return(      
         //...      
                    <TableContainer>
                        <Table aria-label="authors table">
                            <TableHead>
                                <TableRow>
                                    <TableCell align="center">Name</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {authors.map(({ authorID, name }) => (
                                    <TableRow key={authorID}>
                                        <TableCell>{name}</TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </TableContainer>
       //...
 )}

Solution

Ok guys, I tried laucnhing a npm update and a npm install -g create-next-app and apparently they resolved the problem

Answered By – Stefano Buzzoni

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.