EvalError using next/dynamic

[thiisiriya]

Steps to reproduce

I find difficult to give a reproducible example because broken behaviour is unpredictable and depends on module dependencies. But the general Idea I think that evaluation next/dynamic should be skipped the same wave as next/image.

Current behavior

Using next/dynamic throws an error:

EvalError: Cannot assign to read only property '__esModule' of function 'function dynamic(dynamicOptions, options) {
    let loadableFn = _loadablesharedruntime.default;
    let loadab...<omitted>...

The error stack:

- node_modules/@wyw-in-js/transform/lib/module.js:224:1
- node_modules/@wyw-in-js/transform/lib/module.js:118:7
- node_modules/@pigment-css/unplugin/build/index.js:103:12
- node_modules/next/dynamic.js:1:40
- node_modules/next/dynamic.js:3:3

Expected behavior

next/dynamic evaluation should be skipped the same way as next/image and next/font

Context

No response

Your environment

No response

Search keywords: next, dynamic

[Hokid]

Having the same issue

[brijeshb42]

You can try to disable this in your code for now by using this option in Pigment config -

{
  // ...rest
  async asyncResolve(what) {
    if (what === 'next/dynamic') {
      return require.resolve('@pigment-css/nextjs-plugin/next-image');
    }
    return null
  }
}

[thiisiriya]

@brijeshb42 This won't work because in pigment-css-nextjs-plugin there's a check for what.startsWith('next/') above custom asyncResolve, so asyncResolve from pigment config will never run. For now I've replaced my next/dynamic instances with react.lazy and suspense which seems to work.

{
  // ...rest
  if (
    what === 'react' ||
    what.startsWith('react/') ||
    what.startsWith('react-dom/') ||
    what.startsWith('@babel/') ||
    what.startsWith('next/')
  ) {
    return require.resolve(what)
  }
  if (asyncResolve) {
    return asyncResolve(what, importer, stack)
  }
  return null
}

[Hokid]

@brijeshb42 This won't work because in pigment-css-nextjs-plugin there's a check for what.startsWith('next/') above custom asyncResolve, so asyncResolve from pigment config will never run. For now I've replaced my next/dynamic instances with react.lazy and suspense which seems to work.

I can confirm that this does not work. The only solution that worked for me so far is patching next/dynamic directly.

Here is the patch i use:

diff --git a/node_modules/next/dist/client/router.js b/node_modules/next/dist/client/router.js
index c468245..42dff4f 100644
--- a/node_modules/next/dist/client/router.js
+++ b/node_modules/next/dist/client/router.js
@@ -1,7 +1,6 @@
 /* global window */ "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+exports.__esModule = true;
+
 0 && (module.exports = {
     Router: null,
     createRouter: null,
@@ -191,7 +190,7 @@ function makePublicRouterInstance(router) {
 }
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
-  Object.defineProperty(exports.default, '__esModule', { value: true });
+  exports.default.__esModule = true;
   Object.assign(exports.default, exports);
   module.exports = exports.default;
 }
diff --git a/node_modules/next/dist/client/script.js b/node_modules/next/dist/client/script.js
index 9c27a4e..a0eba55 100644
--- a/node_modules/next/dist/client/script.js
+++ b/node_modules/next/dist/client/script.js
@@ -1,8 +1,7 @@
 'use client';
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+exports.__esModule = true
+
 0 && (module.exports = {
     default: null,
     handleClientScriptLoad: null,
@@ -333,7 +332,7 @@ Object.defineProperty(Script, '__nextScript', {
 const _default = Script;
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
-  Object.defineProperty(exports.default, '__esModule', { value: true });
+  exports.default.__esModule = true
   Object.assign(exports.default, exports);
   module.exports = exports.default;
 }
diff --git a/node_modules/next/dist/client/with-router.js b/node_modules/next/dist/client/with-router.js
index b97fe53..a4684fe 100644
--- a/node_modules/next/dist/client/with-router.js
+++ b/node_modules/next/dist/client/with-router.js
@@ -1,7 +1,5 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+exports.__esModule = true;
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
@@ -29,7 +27,7 @@ function withRouter(ComposedComponent) {
 }
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
-  Object.defineProperty(exports.default, '__esModule', { value: true });
+  exports.default.__esModule = true;
   Object.assign(exports.default, exports);
   module.exports = exports.default;
 }
diff --git a/node_modules/next/dist/shared/lib/dynamic.js b/node_modules/next/dist/shared/lib/dynamic.js
index f3c788a..a0302b5 100644
--- a/node_modules/next/dist/shared/lib/dynamic.js
+++ b/node_modules/next/dist/shared/lib/dynamic.js
@@ -1,7 +1,8 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+
+// Fixes can not assign read only property __esModule. Source: wyw-in-js
+exports.__esModule = true
+
 0 && (module.exports = {
     default: null,
     noSSR: null
@@ -123,7 +124,7 @@ function dynamic(dynamicOptions, options) {
 }
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
-  Object.defineProperty(exports.default, '__esModule', { value: true });
+  exports.default.__esModule = true
   Object.assign(exports.default, exports);
   module.exports = exports.default;
 }

[JonCognioDigital]

@brijeshb42 This won't work because in pigment-css-nextjs-plugin there's a check for what.startsWith('next/') above custom asyncResolve, so asyncResolve from pigment config will never run. For now I've replaced my next/dynamic instances with react.lazy and suspense which seems to work.

I can confirm that this does not work. The only solution that worked for me so far is patching next/dynamic directly.

Here is the patch i use:

Brilliant, thanks for the solution!

However, this seems to be a common problem. I tried installing Clerk for user management and it was incompatible with Pigment due to using next/dynamic. I nearly switched back to CSS modules until I found this solution.

Is this something the MUI/Pigment team could add in? Is it as simple as implementing the skipping like next/image and next/font?

[Hokid]

Brilliant, thanks for the solution!

You're welcome!

Is this something the MUI/Pigment team could add in?

The project is on pause(see comment). I don't think they will fix it in near feature.

@JonCognioDigital

[JonCognioDigital]

Ah man! This was pretty much my last option before having to use Tailwind.

I hate Tailwind. 😐

[espretto]

There still is linaria. It is not much healthier than pigment-css at this point but it

• has no runtime
• has good bundler support
• supports atomicity
• supports css tag templates