mui
@mui/system/useMediaQuery null ref introduced when upgrading from @mui/material v6 to v7
Steps to reproduce
Compile the application with NX and NextJS
Current behavior
A null ref occurs during compile time on a call to useMediaQuery.unstable_createUseMediaQuery
Expected behavior
No exception should occur :)
Context
Hi,
Not sure whether this is a bug with MUI, NX, NextJS or Webpack, but I am having an issue during compile time, I get a null ref on useMediaQuery:
TypeError: (0 , a.unstable_createUseMediaQuery) is not a function
Here is the stacktrace:
TypeError: (0 , _useMediaQuery.unstable_createUseMediaQuery) is not a function
at eval (webpack-internal:///(rsc)/../../node_modules/@mui/material/useMediaQuery/index.js:12:65)
at (rsc)/../../node_modules/@mui/material/useMediaQuery/index.js (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\vendor-chunks\@mui.js:12489:1)
at __webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/../../node_modules/@mui/material/index.js:2541:46)
at (rsc)/../../node_modules/@mui/material/index.js (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\vendor-chunks\@mui.js:12128:1)
at __webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:11:106)
at (rsc)/./src/app/layout.tsx (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\app\page.js:859:1)
at Function.__webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at async e7 (F:\Git\Frontend\spuria-web\source\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:396933)
at async tS (F:\Git\Frontend\spuria-web\source\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400486)
at async tw (F:\Git\Frontend\spuria-web\source\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:401047)
at async tO (F:\Git\Frontend\spuria-web\source\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2320)
at async F:\Git\Frontend\spuria-web\source\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2989 {
digest: '542685059'
}
⨯ TypeError: (0 , _useMediaQuery.unstable_createUseMediaQuery) is not a function
at __webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at __webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at eval (./src/app/layout.tsx:11:106)
at (rsc)/./src/app/layout.tsx (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\app\page.js:859:1)
at Function.__webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
digest: "1874917295"
⨯ TypeError: (0 , _useMediaQuery.unstable_createUseMediaQuery) is not a function
at __webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at __webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at eval (./src/app/layout.tsx:11:106)
at (rsc)/./src/app/layout.tsx (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\app\page.js:859:1)
at Function.__webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
digest: "1874917295"
⨯ TypeError: (0 , _useMediaQuery.unstable_createUseMediaQuery) is not a function
at __webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at __webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at eval (./src/app/layout.tsx:11:106)
at (rsc)/./src/app/layout.tsx (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\app\page.js:859:1)
at Function.__webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
digest: "542685059"
⨯ TypeError: (0 , _useMediaQuery.unstable_createUseMediaQuery) is not a function
at eval (webpack-internal:///(rsc)/../../node_modules/@mui/material/useMediaQuery/index.js:12:65)
at (rsc)/../../node_modules/@mui/material/useMediaQuery/index.js (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\vendor-chunks\@mui.js:12489:1)
at __webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/../../node_modules/@mui/material/index.js:2541:46)
at (rsc)/../../node_modules/@mui/material/index.js (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\vendor-chunks\@mui.js:12128:1)
at __webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:11:106)
at (rsc)/./src/app/layout.tsx (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\app\page.js:859:1)
at Function.__webpack_require__ (F:\Git\Frontend\spuria-web\source\apps\online-only-next\.next\server\webpack-runtime.js:33:43)
at async e7 (F:\Git\Frontend\spuria-web\source\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:396933)
at async tS (F:\Git\Frontend\spuria-web\source\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400486)
at async tw (F:\Git\Frontend\spuria-web\source\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:401047)
at async tO (F:\Git\Frontend\spuria-web\source\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2320)
at async F:\Git\Frontend\spuria-web\source\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2989 {
digest: '542685059',
page: '/'
For now I added a monkey patch to resolve the issue (safe guarding on the null, only calling the function when it is available).
Here is the patch:
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _useMediaQuery = require("@mui/system/useMediaQuery");
// TODO: Bug 182343: Bug with @mui/system/useMediaQuery introduced when upgrading from @mui/material v6 to v7
console.log(JSON.stringify(`HIERO: ${_useMediaQuery.unstable_createUseMediaQuery}`));
let useMediaQuery = null;
if (_useMediaQuery && _useMediaQuery.unstable_createUseMediaQuery) {
var _identifier = _interopRequireDefault(require("../styles/identifier"));
useMediaQuery = (0, _useMediaQuery.unstable_createUseMediaQuery)({
themeId: _identifier.default
});
}
var _default = exports.default = useMediaQuery;
Your environment
npx @mui/envinfo
System: OS: Windows 11 10.0.26100 Binaries: Node: 22.13.1 - C:\Program Files\nodejs\node.EXE npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (137.0.3296.52) npmPackages: @emotion/react: 11.14.0 => 11.14.0 @emotion/styled: 11.14.1 => 11.14.1 @mui/core-downloads-tracker: 7.3.1 @mui/icons-material: 7.3.1 => 7.3.1 @mui/material: 7.3.1 => 7.3.1 @mui/material-nextjs: 7.3.0 => 7.3.0 @mui/private-theming: 7.3.1 @mui/styled-engine: 7.3.1 @mui/system: 7.3.1 @mui/types: 7.4.5 @mui/utils: 7.3.1 @mui/x-date-pickers: 8.9.2 => 8.9.2 @mui/x-internals: 8.9.2 @types/react: 18.3.1 => 18.3.1 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 typescript: 5.8.3 => 5.8.3
nx report
Node : 22.13.1
OS : win32-x64
Native Target : x86_64-windows
yarn : 1.22.22
nx : 21.3.11 @nx/js : 21.3.11 @nx/jest : 21.3.11 @nx/eslint : 21.3.11 @nx/workspace : 21.3.11 @nx/cypress : 21.3.11 @nx/devkit : 21.3.11 @nx/eslint-plugin : 21.3.11 @nx/module-federation : 21.3.11 @nx/next : 21.3.11 @nx/react : 21.3.11 @nx/storybook : 21.3.11 @nx/vite : 21.3.11 @nx/web : 21.3.11 @nx/webpack : 21.3.11 typescript : 5.8.3
Search keywords: useMediaQuery v7 nulll ref
The useMediaQuery hook from Material-UI is trying to call unstable_createUseMediaQuery from the @mui/system package, but this function either doesn't exist or isn't being exported correctly due to version mismatches.
Please share a minimal reproduction via StackBlitz, CodeSandbox, or a minimal GitHub repo.
Same here, got the similar stacktrack while trying to deploy my nextjs app, and it yelled at me with this: TypeError: (0 , a.unstable_createUseMediaQuery) is not a function when using useMediaQuery.
I had the same problem the last 3 days and tried several things. What worked: npx npm-check-updates -u npm install there where some major updates, but (for me) none of them breaking
@ZeeshanTamboli here the repro: https://github.com/Maus3rVonDutch/nx-mui-bug
I was having issues with StackBlitz and NX, it got stuck during install, so I just created a repo on GitHub instead.
Just run npm install in org and then execute a build with npm run build org, you should see the error.
NB this repo somewhat resembles my project, althoug this NX repo uses a newer workspace setup (but the error is the same altogether)
Here's a screenshot of the error with this project:
Seems related to https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 / https://github.com/mui/material-ui/pull/43360
I can reproduce the error in the above provided reproduction. Looks like an error when specifically building a Next.js app.
@ZeeshanTamboli yeah, I was afraid of that, I think it might be due the ESM changes in MUI, which now is not properly handled by the version of NextJS (or Webpack under the hood) I am using. Sadly I am on the latest version of NX already, so I cannot bump NextJS and React any further due to version constraints. Well, I guess we'll have to wait for the package maintainers of NX specifically to support higher versions.... Thnx for looking into this.
@kevin-hoogkamer-msxeh I can see that you have a dependency of @mui/x-date-pickers with version 8.9.2 in your packkage.json, here: https://github.com/Maus3rVonDutch/nx-mui-bug/blob/69e723a21dd6cf854eebf31062b8096f322cd402/org/package.json#L18
Could you try and remove that as there is another issue present in the X repo mentioning this and I would like to rule this out.
We encountered this same issue when upgrading our Next.js app to MUI v7.
As a temporary workaround, we updated all of our MUI package versions to ~7.2.0 which seems to have eliminated the error.
EDIT: The original package version (that we replaced) was ^7.3.1.
I had the same error, but after updating Next from 15.2.4 to 15.4.6, the error is gone
"@mui/icons-material": "^7.3.1",
"@mui/material": "^7.3.1",
"@mui/material-nextjs": "^7.3.0",
"next": "15.4.6",
Just adding to this. Had the same issue today also migrating a standalone nextjs project (working) into a trubo monorepo.
Not 100% sure why this would happen, but applied a pnpm monkey patch like Maus3rVonDutch for now.
Hoping we can figure out what is going on and will be fixed by the next time we update versions! 🤞
I had the same error, but after updating Next from 15.2.4 to 15.4.6, the error is gone
"@mui/icons-material": "^7.3.1", "@mui/material": "^7.3.1", "@mui/material-nextjs": "^7.3.0", "next": "15.4.6",
Just updated and it has solved for us also 👌
We encountered this same issue when upgrading our Next.js app to MUI v7.
As a temporary workaround, we updated all of our MUI package versions to
~7.2.0which seems to have eliminated the error.EDIT: The original package version (that we replaced) was
^7.3.1.
I downgraded to 7.2.0 as well, worked fine with Next ^14.2.25
Still got the same issue, the issue persist even i have updaed the packages and next.js version
Still got the same issue, the issue persist even i have updaed the packages and next.js version
Which versions do you have installed exactly?
Still got the same issue, the issue persist even i have updaed the packages and next.js version
Which versions do you have installed exactly?
"next": "14.2.32", "@mui/icons-material": "^7.3.1", "@mui/material": "^7.3.1",
Still got the same issue, the issue persist even i have updaed the packages and next.js version
Which versions do you have installed exactly?
"next": "14.2.32", "@mui/icons-material": "^7.3.1", "@mui/material": "^7.3.1",
Downgrade to material 7.2.0 with that version of next. An alternative if possible is to upgrade next to latest 15.
Still got the same issue, the issue persist even i have updaed the packages and next.js version
Which versions do you have installed exactly?
"next": "14.2.32", "@mui/icons-material": "^7.3.1", "@mui/material": "^7.3.1",
Downgrade to material 7.2.0 with that version of next. An alternative if possible is to upgrade next to latest 15.
only downgading them to :
"@mui/material": "^5.15.4",
"@mui/material-nextjs": "^5.15.3",
"next": "14.0.4",
worked for me
We have the same error when we upgrade from MUI 7.2 to 7.3.1. We need to add following lines to webpack.config.js
{
test: /\.m?js$/,
include: /@mui/,
type: 'javascript/auto', // Webpack treats it as JS, not CJS
},
Also seeing this issue with next 14.2.32. Downgrading to @mui/material 7.2.x versions solves it, but this isn't really a permanent fix.
I had the same error, but after updating Next from 15.2.4 to 15.4.6, the error is gone
"@mui/icons-material": "^7.3.1", "@mui/material": "^7.3.1", "@mui/material-nextjs": "^7.3.0", "next": "15.4.6",
Just updated the same items and it worked smoothly S2 Tnkx
Will this be addressed for Next 14, or are Next 14 installations stuck now?
I am unsure if the root cause is due to MUI or Next. Either way, upgrading Next to 15 is probably the best bet anyway.
Next 14 is still supported and maintained, and upgrading immediately is not necessarily a simple matter. There are other dependencies which can hold that back.
This should be taken seriously and addressed.
For me the problem is caused by CssBaseline, removing it solves the problem. But I would like to use, so I will check with the upgrades.
"@mui/material": "^7.3.4", "@mui/material-nextjs": "^7.3.3", "next": "^14.2.5",
Based on https://github.com/Maus3rVonDutch/nx-mui-bug , it turns out that the use client is missing from the monorepo package:
+ "use client";
import styles from "./ui-lib1.module.css";
import { useMediaQuery } from "@mui/material";
…
Adding "use client" make the dev runnable.
@kevin-hoogkamer-msxeh can you confirm that the use client fixes the issue you encountered?
Based on https://github.com/Maus3rVonDutch/nx-mui-bug , it turns out that the
use clientis missing from the monorepo package:
- "use client"; import styles from "./ui-lib1.module.css"; import { useMediaQuery } from "@mui/material"; …
Adding
"use client"make the dev runnable.@kevin-hoogkamer-msxeh can you confirm that the
use clientfixes the issue you encountered?
I suspect that this issue might be bigger than that? My team's code base does not explicitly make use of useMediaQuery anywhere in our code, but issue persists when upgrading to 7.3.1^ together with Next 14. Just a thought.
is there any update for this? tried to downgrade to 7.2.x, but still got the error
