NextJS: next-i18next incompatibility

rkurbatov commented 4 weeks ago

Steps to reproduce

Either pigment or next-i18next i18n library can work on a project:

https://github.com/rkurbatov/acq-test - here is example repository for NextJS v12. We managed to fix next-i18next import problem I created earlier (https://github.com/mui/pigment-css/issues/115 - author provided the fixed version) but here we have the new one, that looks totally unrelated on first sight.

Current behavior

https://github.com/rkurbatov/acq-test/blob/master/pages/_error.tsx - watch this file. Once you try to uncomment the code and import the Image component the build fails complaining on problems with the import of the next/image component (something __esModule related):

EvalError: Cannot assign to read only property '__esModule' of function 'function Head({ children  }) {
    const ampState = (0, _react).useContext(_ampContext.AmpStateContext);
    co...<omitted>..

The problem goes away if you comment either css() function call and related code or useTranslation() hook usage.

If you try NextJS version 13 it doesn't work even with the commented page complaining on something totally unrelated:

TypeError: result.then(...).finally is not a function
    at /home/rkurbatov/WebstormProjects/acq-test/node_modules/.pnpm/next@13.5.6_@babel+core@7.24.9_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/server/lib/trace/tracer.js:123:98
    at NoopContextManager.with (/home/rkurbatov/WebstormProjects/acq-test/node_modules/.pnpm/next@13.5.6_@babel+core@7.24.9_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7057)

Disabling either css() function or useTranslate() hook helps as also.

I really don't understand how import of the translation hooks ruins things but it does, probably that's related to the way pigment transpiles the source code. For now that stops us from the usage of the pigment library that looks like the best alternative to emotion we use currently.

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: NextJS next-i18next

rkurbatov commented 2 weeks ago

There are several NextJS related issues that are making pigment unsable for now. Unluckily.

rhoiyds commented 2 weeks ago

@rkurbatov Yeah, I've been hitting many walls with pigment over the past few weeks. I really want to push ahead with it for my latest project because of code style familiarity, but there's such a wide variety of nasty issues. (The EISDIR one I posted, particularly. Have you not encountered this one?) I did change my project over from next-i18next to next-intl for use with pigment and I'm actually much happier with next-intl than next-i18next which I've used for many previous projects. If your circumstances make it possible, I'd recommend a switch over!

rkurbatov commented 2 weeks ago

@rhoiyds the problem is our project is pretty big and pretty old. We are using emotion everywhere but NextJS 13+ doesn't support it so we were searching for a good CSS library that allows simple conversion. The problem is I need to update multiple pacakages at once on a big codebase. And I cannot migrate styles partially. That works on a minimal projects but once I add something new - it fails due to incompatibilty. And when I resolve issue on the main project - there is another one that I have to find (as it fails silently quite often), fix on small repo and the fix on the main repo. And because pigment is still inmature and has way many issues with nextjs especially (that is known for its import joggling) I am afraid we have to search for something else.

samuelgoldenbaum commented 3 days ago

@rkurbatov Yeah, I've been hitting many walls with pigment over the past few weeks. I really want to push ahead with it for my latest project because of code style familiarity, but there's such a wide variety of nasty issues. (The EISDIR one I posted, particularly. Have you not encountered this one?) I did change my project over from next-i18next to next-intl for use with pigment and I'm actually much happier with next-intl than next-i18next which I've used for many previous projects. If your circumstances make it possible, I'd recommend a switch over!

Feeling your pain and frustration. If this is the V6 direction for material-ui, then I am seriously considering other options as I am finding issue after issue with pigment making the DX super frustrating...

mui / pigment-css