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[bot]]

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.

[timlindsk]

@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.

I were using that library and had the same issue, I ended up not using the plugin too