Issue with the 'use client' directive when using Material UI auto complete

[ysumeet97]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @mui/system@5.15.20 for the project I'm working on.

Facing an issue with the 'use client' directive when using Next.js v14.2.4 approuter and @mui/material v5.15.21
Note: This only happens when using any mui component that inherently uses /node_modules/@mui/material/Popper/Popper.js. In my case it was with an Autocomplete and Popover.

Please find the stacktrace below for an Autocomplete (Popover also has the similar stacktrace):

⨯ ./node_modules/@mui/system/useThemeWithoutDefault.js
Error:
× The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.
╭─[.../node_modules/@mui/system/useThemeWithoutDefault.js:1:1]
1 │ "use strict";
2 │ 'use client';
· ─────────────
3 │
4 │ Object.defineProperty(exports, "__esModule", {
5 │ value: true
╰────

Import trace for requested module:
./node_modules/@mui/system/useThemeWithoutDefault.js
./node_modules/@mui/material/Popper/Popper.js
./node_modules/@mui/material/Popper/index.js
./node_modules/@mui/material/Autocomplete/Autocomplete.js
./node_modules/@mui/material/Autocomplete/index.js
barrel_optimize?names=Autocomplete,Box,TextField,styled!=!./node_modules/@mui/material/index.js

Here is the diff that solved my problem:

diff --git a/node_modules/@mui/system/useThemeWithoutDefault.js b/node_modules/@mui/system/useThemeWithoutDefault.js
index 1644b84..b71eb85 100644
--- a/node_modules/@mui/system/useThemeWithoutDefault.js
+++ b/node_modules/@mui/system/useThemeWithoutDefault.js
@@ -1,5 +1,6 @@
-"use strict";
 'use client';
+"use strict";
+
 
 Object.defineProperty(exports, "__esModule", {
   value: true

This issue body was partially generated by patch-package.

Search keywords:

[sumeet-yedula]

Having the same issue with Checkbox as well. PFA the diff:
diff --git a/node_modules/@mui/icons-material/CheckBox.js b/node_modules/@mui/icons-material/CheckBox.js
index a827349e..8d53579d 100644
--- a/node_modules/@mui/icons-material/CheckBox.js
+++ b/node_modules/@mui/icons-material/CheckBox.js
@@ -1,5 +1,5 @@
-"use strict";
"use client";
+"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

[mj12albert]

@ysumeet97 @sumeet-yedula I couldn't repro this using the latest versions of Next.js (14.2.5) and Material UI (5.16.6), could you try again with those versions?

Here's a working demo: https://stackblitz.com/edit/stackblitz-starters-ptzusb?file=app%2Fpage.tsx

[sumeet-yedula]

Sure will try that and let you know

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[feralislatr]

@ysumeet97 Are you using this library by any chance? https://github.com/kwonoj/swc-plugin-coverage-instrument
I'm having the same issue in my project. I had to comment out the experimental config below to stop the error without modifying the packages.

  experimental: {
    swcPlugins: [
      ['swc-plugin-coverage-instrument', {}]
    ]
  },

The issue is present across 1000+ @mui files including the following in my own project:
@mui/icons-material/Add.js
@mui/system/useThemeWithoutDefault.js
@mui/icons-material/DensityMedium.js
@mui/icons-material/utils/createSvgIcon.js

I'm not sure whether it can be fixed from the instrumentation library side.