Help with makeStyles is not a function in 8thWall React project using Material UI

🧑‍💻 Technical Support
1

Hi all,

Multiple of our projects have stopped working due to the following issue:

Uncaught TypeError: makeStyles is not a function

We are using the React template which in the head.html loads in the Material UI through a script tag.

<script src="//unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js" crossorigin="anonymous"></script>

Despite this, the error persists, calling typeof MaterialUI.makeStyles returns undefined.

Has anyone gotten makeStyles to work reliably with 8thWall recently? Is there a recommended way to load Material UI in a React-based 8thWall project?

Any advice would be super helpful. Thanks in advance!

2

Not sure if it’s helpful but I found this info on Github:
makeStyle is deprecated in v5, try to use: styled()

1 Like
3

Hi Jonas, the makeStyles is not a function error usually comes from version mismatches between React and Material UI. Since the React template loads dependencies via <script> tags, it’s possible that the latest version you’re loading includes breaking changes.

We recommend locking both React and Material UI to specific versions known to work together—like React 17 with Material UI 4.12.4. You can find an example setup here that uses fixed versions: A-Frame: React Material UI | 8th Wall | 8th Wall

4

Thank you!

That pointed me in the right direction. I needed to set react and react-dom to 18.3.1, set material UI to 4.12.4, and upgraded aframe to 1.5.0.

Both react and react-dom were also set to “latest”.

Best,
Jonas