Error when adding next/link to async Page

[aleksandrjet]

Steps to reproduce

I saw that it has #228, but the problem still keeps. I got to reproduce this in curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css-master/examples/pigment-css-nextjs-ts by addingimport NextLink from 'next/link' and make the page is async

I used [email protected] and @pigment-css/[email protected]

Is there any understanding when it will fix?

Current behavior

I got error when run npm run dev

> [email protected] dev
> next dev

  ▲ Next.js 14.2.11
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 1911ms
 ○ Compiling / ...
./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/module.js:224
      throw new EvalError(`${e.message} in${this.callstack.join('\n| ')}\n`);
      ^

EvalError: Cannot assign to read only property '__esModule' of object '[object Object]' in./pigment-css-nextjs-ts/node_modules/next/dist/client/link.js
| ./pigment-css-nextjs-ts/node_modules/next/link.js
| ./pigment-css-nextjs-ts/src/app/page.tsx

    at Module.evaluate (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/module.js:224:13)
    at require.Object.assign.ensure (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
    at newRequire (./pigment-css-nextjs-ts/node_modules/@pigment-css/unplugin/build/index.js:104:12)
    at ./pigment-css-nextjs-ts/node_modules/next/link.js:1:40
    at ./pigment-css-nextjs-ts/node_modules/next/link.js:3:3
    at Script.runInContext (node:vm:135:12)
    at Module.evaluate (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
    at require.Object.assign.ensure (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
    at newRequire (./pigment-css-nextjs-ts/node_modules/@pigment-css/unplugin/build/index.js:104:12)
    at ./pigment-css-nextjs-ts/src/app/page.tsx:12:36
    at ./pigment-css-nextjs-ts/src/app/page.tsx:331:3
    at Script.runInContext (node:vm:135:12)
    at Module.evaluate (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
    at evaluate (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/evaluators/index.js:14:5)
    at BaseAction.evalFile (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/transform/generators/evalFile.js:35:43)
    at evalFile.next (<anonymous>)
    at ./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:78
    at EventEmitter.action (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:25:22)
    at BaseAction.emitAction (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:131:39)
    at nextFn (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:32)
    at processNext (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:111:28)
    at Object.next (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:120:9)
    at asyncActionRunner (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:39:102)
    at async asyncActionRunner (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
    at async Object.transform (./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/transform.js:107:20)
    at async Object.transform (./pigment-css-nextjs-ts/node_modules/@pigment-css/unplugin/build/index.js:268:24)
    at async Object.transform (./pigment-css-nextjs-ts/node_modules/unplugin/dist/webpack/loaders/transform.js:120:15)
 ⨯ unhandledRejection: ./pigment-css-nextjs-ts/node_modules/@wyw-in-js/transform/lib/module.js:224
      throw new EvalError(`${e.message} in${this.callstack.join('\n| ')}\n`);
      ^

Expected behavior

No response

Context

No response

Your environment

I don't use mui

Search keywords: next/link, next, async

[brijeshb42]

So we have fixed it in the repo but not yet published a new version with the fix (v0.0.23). We'll be doing a new release this week that should have the fix.

[brijeshb42]

v0.0.23 has been released. Could you test with this version ? Feel free to re-open if it doesn't work.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @aleksandrjet! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[aleksandrjet]

Thanks! Now it is working

[Michael-Grupp]

@brijeshb42 The recent fix for handling next/link works fine when using next/link directly. However, the issue persists when using the <Link> component from next-intl, which wraps next/link. This causes the known errors, as the fix doesn't seem to fully support how next-intl relies on next/link.

[brijeshb42]

Here's what you can try. In your Pigment config, you can add an asyncResolve callback

const pigmentConfig = {
  // other items
  asyncResolve(what) {
    if (what === 'next-intl') {
      return require.resolve('./dummy-module');
    }
    return null;
  }
}

Also create a dummy-module.js file alongside the next.config file with this content

module.exports = {
 // provide stubs having the same exports as what `next-intl` provides
}

Let me know what happens with this change.
We are basically telling Pigment (during CSS evaluation phase) to refer to a dummy module whenever it encounters a next-intl import.

Same thing happens in the next.js plugin module as well for next/link.

[Michael-Grupp]

@brijeshb42 Thank you for the quick response. I will test it