Material ui cannot read properties of null error when using components

Question

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

blmt-online-shop@0.1.0 /home/phantom/Documents/Programming/BLMT online shop/BLMTonlineshop/frontend/blmt-online-shop
├─┬ @mui/material@5.9.3
│ ├─┬ @mui/base@5.0.0-alpha.92
│ │ └── react@18.2.0 deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ ├─┬ @mui/system@5.9.3
│ │ ├─┬ @mui/private-theming@5.9.3
│ │ │ └── react@18.2.0 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/styled-engine@5.8.7
│ │ │ └── react@18.2.0 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
│ │ └── react@18.2.0 deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ ├─┬ @mui/utils@5.9.3
│ │ └── react@18.2.0 deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ ├─┬ react-transition-group@4.4.5
│ │ └── react@18.2.0 deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ └── react@18.2.0 deduped
├─┬ material-ui@0.20.2
│ ├─┬ react-event-listener@0.6.6
│ │ └── react@18.2.0 deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui, "^16.3.0" from node_modules/react-event-listener
│ ├─┬ react-transition-group@1.2.1
│ │ └── react@18.2.0 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
│ ├── react@18.2.0 deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ └─┬ recompose@0.26.0
│   └── react@18.2.0 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
├─┬ next@12.1.6
│ ├── react@18.2.0 deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ └─┬ styled-jsx@5.0.2
│   └── react@18.2.0 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
├─┬ react-dom@18.2.0 invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
│ └── react@18.2.0 deduped invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui
└── react@18.2.0 invalid: "^15.4.0 || ^16.0.0" from node_modules/material-ui

npm ERR! code ELSPROBLEMS
npm ERR! invalid: react@18.2.0 /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.

Answer 1

Turns out I had a node_modules and package.json/package_lock.json in my parent folder. I assume that it had a duplicate version of react. Deleting those 3 files fixed the issue.