@pigment-css incompatibility problem

[rkurbatov]

This problem looks quite indirect and probably @pigment-css is the source of it, but I just found very similar issue:
#48 that was closed due to impossibility to reproduce it.

https://github.com/rkurbatov/acq-test - here is my minimal application that reproduces the issue. It's NextJS app that uses next-i18next for localization. That works until I try to switch from @emotion to @pigment-css library.

Once I try to import css function in any of the components on any NextJS page I have this 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

Seems like something is really odd with the way the package exports functions. NextJS is known for lots of problems with imports and modules, juggling them in multiple ways so finally something happens breaking our app.

I opened similar bug reports in both pigment and next-i18next repos but probably I can get some help here as well.
mui/pigment-css#115
i18next/next-i18next#2288

[adrai]

Probably a bundling problem or some webpack or similar issue...
Not a direct i18next issue, sorry.

[rkurbatov]

@adrai what if I want to use i18next-fs-backend as custom backend (I will play with imports or will try some patched version of it) - how should config look like in that case?

I'm trying

const i18nextFSBackend = require('i18next-fs-backend')

process.env.I18NEXT_DEFAULT_CONFIG_PATH = __filename

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'es']
    },
    backend: {
        loadPath: require('path').resolve('./public/static/locales'),
    },
    use: [i18nextFSBackend]
}

instead of standard and working

process.env.I18NEXT_DEFAULT_CONFIG_PATH = __filename

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'es']
    },
    localePath: typeof window === 'undefined'
        ? require('path').resolve('./public/static/locales')
        : './public/static/locales',
}

but it doesn't work for me.

[rkurbatov]

Oh, sorry, that should be quetion to 'next-i18next' author :)

[adrai]

Oh, sorry, that should be quetion to 'next-i18next' author :)

Not really, maybe next.js

[rkurbatov]

@adrai so just likes #48 mentions the issue is in file fs.js:

if (typeof require !== 'undefined') {
  var f = require('fs')
  // if (f.default) f = f.default
  exports.default = f
  module.exports = exports.default
}

Once I comment this line my build stops failing. And if I remove pigment-css wrapper (withPigment) and any mention of it everything still works. My demo app is plain next.js app without any webpack changes/additions.

[adrai]

Do you use turbo?

[rkurbatov]

Nope. No config changes to defaults at all.

[adrai]

I just cloned your repo and fixed the next.config.js to correctly use with Pigment... rkurbatov/acq-test#1 and I do not see any error...

[rkurbatov]

Try uncommenting this code - https://github.com/rkurbatov/acq-test/blob/master/pages/_error.tsx while you serve it and go to any absent page (like localhost:3000/aaa). I forgot to enable withPigment in my repo. It will fail with the error I mentioned.

If you uncomment it while it's not running and then run serve - it will just hang.

If you comment out the // if (f.default) f = f.default in fs.js in i18next-fs-backend package it will work.

Pigment uses wyw-in-js transformation and it doesn't work on that package for some reason.

[adrai]

please update next-i18next and retry

[rkurbatov]

YAY! Thanks, that works now!