I am encountering an error while trying to run the development server for my Next.js project. Whenever I try to integrate MUI with my project I encounter these types of errors. The error message indicates a TypeError related to api.createContextKey not being a function. I have followed various troubleshooting steps, but the issue still persists. I'm seeking assistance to resolve this problem.
I would appreciate any guidance or insights on how to resolve this issue. Are there any additional steps I should take to troubleshoot? Is there a known compatibility issue with certain versions of Next.js or its dependencies? Thank you in advance for your assistance.
Steps taken:
Verified Node.js and npm versions:
Node.js: v16.17.0 npm: 8.15.0 Checked the project's package.json file and confirmed the following relevant dependencies:
next: 13.4.10 react: 18.2.0 react-dom: 18.2.0 Troubleshooting steps already attempted:
- Deleted node_modules directory and reinstalled dependencies.
- Cleared npm cache using npm cache clean --force.
- Verified compatibility of Node.js version.
- Checked for conflicting global dependencies.
- Verified the correctness of package.json scripts:
The "dev" script is defined as "next dev". Output of npm list -g --depth=0 (global dependencies):
/Users/grace/.npm-global/lib
├── @microsoft/generator-sharepoint@1.15.2
├── @pnp/generator-spfx@1.16.1
├── create-react-app@5.0.1
├── gulp@4.0.2
├── npm@9.7.2
├── tar@6.1.15
├── yarn@1.22.19
└── yo@4.3.0
Despite these efforts, the error persists when running npm run dev.
I have limited understanding with Next.js. I feel confident with regular React and it is very easy to use MUI components with just React. I understand because Next.js has defaulted server side rendered components we need to do some additional steps in set up. I follow tutorials step-by-step and still have issues running the project.
