PrimeReact: Can't resolve 'primelocale' in v2

[juliecki]

I've upgraded from v1.6.0 -> v2.0.1.
Since then, I cannot import the needed primelocale dynamically.

It's used like this:

export const dynamicPrimeReactLocaleActivate = async (
  currentLocale: string,
) => {
  const localeFile = await import(`primelocale/${currentLocale}.json`);
  addLocale(currentLocale, localeFile[currentLocale]);
  locale(currentLocale);
};

But then I get the Error: Module not found: Error: Can't resolve 'primelocale'

PrimeReact: "primereact": "10.9.1"
React: "react": "18.3.1"
TypeScript: "typescript": "5.7.2"

[melloware]

@juliecki we now have a way more improved way to load them as JavaScript instead of JSON.

See: https://stackblitz.com/edit/axcck4-nuukjdrw?file=src%2FApp.tsx

[juliecki]

Thanks!

I now changed it to

export const dynamicPrimeReactLocaleActivate = async (
  currentLocale: string,
) => {
  addLocale(currentLocale, all[currentLocale as keyof AllLocales]);
  locale(currentLocale);
};

But now I get this error:

 Cannot find module 'primelocale'

Is it caused by the modeResolution in tsconfig?

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "esnext.intl",
      "es2017.intl",
      "es2018.intl"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true
  }

[melloware]

yeah it looks like thta stackblitz has...

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,
    "allowJs": true,

    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[juliecki]

Still don't get it work when I configure it like in stackblitz. I saw that the stackblitz project is built with Vite, but we don't have yet migrated to Vite and are still using CRA. I don't know if this is causing issues as well.

[melloware]

@blutorange any thoughts with CRA? Yeah everything is working fine with Vite and NextJS.

[blutorange]

On top of my head, without trying it out: Try setting resolvePackageJsonExports to true. We might want to add a main field to our package.json

Do you have minimal reproduction?

[melloware]

@blutorange we have a simple CRA basic app here https://github.com/primefaces/primereact-examples

you can just grab that and try with PrimeLocale 2.0.1 since its already set up CRA app.

[blutorange]

cra-basic-ts is broken since the 19.0.0 release of react yesterday, had to change the devDependencies from latest to ^18.0.0.

But anyways, I'm getting the same error with "moduleResolution": "node", but it works with "moduleResolution": "bundler"

@juliecki Can you try editing node_modules/primelocale/package.json and see if it works if you add the following lines?

"main": "./js/all.js",
"types": "./js/all.d.ts",

[juliecki]

Adding this to the node_modules/primelocale/package.json

{
    "name": "primelocale",
    "version": "2.0.1",
     …
    "main": "./js/all.js",
    "types": "./js/all.d.ts"
}

and having "moduleResolution": "node" solved the mentioned issue.

Althought, this error now occurs in my jest tests:

 import { ar } from "./ar.js";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { i18n } from "@lingui/core";
      2 | import { addLocale, locale } from "primereact/api";
    > 3 | import { all, AllLocales } from "primelocale";
        | ^
      4 |
```