When upgraded to react-scripts 5, getting typesafe_i18n_1.i18n is not a function in runtime. Anyone knows why?

[jessieweiyi]

I am upgrading a legacy react app using react-scripts 4 to use react-scripts 5. The build was successful. However, I am getting bundle.js:sourcemap:898419 Uncaught TypeError: (0 , typesafe_i18n_1.i18n) is not a function in the browser when running the web site also in dev mode. I have also updated the typesafe-i18n to the latest version 5.19.1.

Anyone knows why?

Error from browser console:

bundle.js:sourcemap:898419 Uncaught TypeError: (0 , typesafe_i18n_1.i18n) is not a function
    at i18n (bundle.js:sourcemap:619481:45)
    at ../strings/dist/index.js (bundle.js:sourcemap:619624:34)
    at options.factory (bundle.js:sourcemap:899029:31)
    at __webpack_require__ (bundle.js:sourcemap:898416:33)
    at fn (bundle.js:sourcemap:898686:21)
    at ./src/strings/index.tsx (bundle.js:sourcemap:33088:16)
    at options.factory (bundle.js:sourcemap:899029:31)
    at __webpack_require__ (bundle.js:sourcemap:898416:33)
    at fn (bundle.js:sourcemap:898686:21)
    at ./src/common/entity/access-request/index.tsx (bundle.js:sourcemap:15830:17)

[ivanhofer]

Hi,
maybe your webpack config does not know how to resolve the package?
For me this sounds similar to this topic

[jessieweiyi]

Do we need any extra webpack config for create react app 5?

When I included

"typesafe-i18n/react": "typesafe-i18n/react/index.cjs",
"typesafe-i18n/formatters": "typesafe-i18n/formatters/index.cjs",
"typesafe-i18n/detectors": "typesafe-i18n/detectors/index.cjs",

into craco.config.js resolve.alias

I am getting error:

Package path ./react/index.cjs is not exported from package /**/node_modules/typesafe-i18n (see exports field in /**/node_modules/typesafe-i18n/package.json)

[ivanhofer]

Do we need any extra webpack config for create react app 5?

I don't really work with webpack so I don't know.

Well, the files are there..

Maybe you need to use ./node_modules/typesafe-i18n/react/index.cjs instead?
I even think the .mjs variant should be the correct one for a modern setup. Maybe try it with that.

Have you tried it with a fresh install of create react app 5?