All I'm trying to do is display text using mui in next.js. I've made my next app using npx create-next-app. I tried deleting node-modules and running npm i, doing the same thing in the parent directory, using other mui components (same error) not using mui (works fine), and reinstalling react, react-dom and mui to ensure they're all at the lastest version. I'm also getting the error:
Warning: 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.
But that's only in the terminal, not rendered. I haven't used react in a while so maybe I'm violating a basic rule?
Here's the result of npm ls react
[email protected] /home/phantom/Documents/Programming/BLMT online shop/BLMTonlineshop/frontend/blmt-online-shop
├─┬ @mui/[email protected]
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ ├─┬ @mui/[email protected]
│ │ ├─┬ @mui/[email protected]
│ │ │ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui, "^16.3.0" from node_modules/react-event-listener, "^15.0.0 || ^16.0.0" from node_modules/material-ui/node_modules/react-transition-group, "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/recompose
│ │ ├─┬ @mui/[email protected]
│ │ │ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui, "^16.3.0" from node_modules/react-event-listener, "^15.0.0 || ^16.0.0" from node_modules/material-ui/node_modules/react-transition-group, "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/recompose
│ │ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui, "^16.3.0" from node_modules/react-event-listener
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui, "^16.3.0" from node_modules/react-event-listener, "^15.0.0 || ^16.0.0" from node_modules/material-ui/node_modules/react-transition-group
│ ├── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ └─┬ [email protected]
│ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui, "^16.3.0" from node_modules/react-event-listener, "^15.0.0 || ^16.0.0" from node_modules/material-ui/node_modules/react-transition-group, "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/recompose
├─┬ [email protected]
│ ├── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ └─┬ [email protected]
│ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui, "^16.3.0" from node_modules/react-event-listener, "^15.0.0 || ^16.0.0" from node_modules/material-ui/node_modules/react-transition-group, "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/recompose
├─┬ [email protected] invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ └── [email protected] deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
└── [email protected] invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
npm ERR! code ELSPROBLEMS
npm ERR! invalid: [email protected] /home/phantom/Documents/Programming/BLMT online shop/BLMTonlineshop/frontend/blmt-online-shop/node_modules/react
Does that mean my react isn't up to date? As I said, I already tried reinstalling it.
Screenshot of the rendered error:
My package.json:
{
"name": "blmt-online-shop",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@fontsource/roboto": "^4.5.7",
"@mui/material": "^5.9.3",
"material-ui": "^0.20.2",
"next": "12.1.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"eslint": "8.17.0",
"eslint-config-next": "12.1.6"
},
"peerDependencies": {
"@types/react": "^16.8.6 || ^17.0.0"
}
}
Index.js:
import React, { Component } from 'react';
import styles from '../styles/Home.module.css';
import HomePage from './components/HomePage.js';
export default class Home extends Component {
render() {
return <HomePage/>
}
}
And finally, HomePage.js
import React, { Component } from 'react';
import { Typography} from '@mui/material/';
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return <Typography>hi</Typography>;
}
}
I apologize for the lengthy post but I tried to include all the information necessary.
