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

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>
       //...
 )}

CodePudding user response：

I tried reproducing what you have done here and it works fine for me, my package.json looks like this:

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

try upgrading next.js to 12.1.5

also try restarting the server since a new package is installed

CodePudding user response：

Try restarting the server, worked for me.

https://stackblitz.com/edit/nextjs-qvc8qi?file=package.json

CodePudding user response：

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