next-i18next incompatiblity

[rkurbatov]

Steps to reproduce

Hi there. We have pretty old project with NextJS 12 and @emotion that has to be upgraded.

There are lots of dependencies, the whole circle of problems so I wanted initially to use the codemod and some manual changes to replace @emotion with Pigment CSS while staying on NextJS 12 (later versions don't support @emotion).

The problem is the application is failing now on the app.prepare() stage if I try to run it. Just a silent fail with status 0. No debugging messages, cannot catch anything. And the build process simply hangs running indefinitely.

The problem disappears when I remove withPigment() wrapper from nextjs config. That doesn't happen on NextJS 13 though there I have other non-related issues so I just want to make smal incremental updates.

I know that Pigment supports NextJS 12 but seems like there is something preventing it to work properly. Had somebody similar issues?

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: NextJS12

[oliviertassinari]

@rkurbatov Do you have a minimal bug reproduction that we can look into?

[rkurbatov]

I traced down the issue and it seems like it's next-i18next package that causes the problem.

Here I have the minimal repo: https://github.com/rkurbatov/acq-test

It works even if I use withPigment wrapper but once I use css function in the _error (or any other) page I have the following error:

EvalError: Cannot read properties of null (reading 'default') in/home/rkurbatov/WebstormProjects/acq-test/node_modules/.pnpm/[email protected]/node_modules/i18next-fs-backend/cjs/fs.js
| /home/rkurbatov/WebstormProjects/acq-test/node_modules/.pnpm/[email protected]/node_modules/i18next-fs-backend/cjs/readFile.js
| /home/rkurbatov/WebstormProjects/acq-test/node_modules/.pnpm/[email protected]/node_modules/i18next-fs-backend/cjs/index.js
| /home/rkurbatov/WebstormProjects/acq-test/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-i18next/dist/commonjs/createClient/node.js
| /home/rkurbatov/WebstormProjects/acq-test/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-i18next/dist/commonjs/appWithTranslation.js
| /home/rkurbatov/WebstormProjects/acq-test/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-i18next/dist/commonjs/index.js
| /home/rkurbatov/WebstormProjects/acq-test/pages/_error.tsx

NextJS has complete mess with modules, imports and module types and seems like pigment makes someing additional with such imports breaking it even more.

cc @oliviertassinari

[rkurbatov]

cc @brijeshb42

 unhandledRejection: /home/rkurbatov/WebstormProjects/acq-test/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/module.js:224
      throw new EvalError(`${e.message} in${this.callstack.join('\n| ')}\n`);

Can I avoid compilation of that module somehow? Or processing of it by pigment, whatever?

[rkurbatov]

The issue resolved after updating next-i18next package