PrimeReact not usable when building a SPA with react-router

[ferdi-github]

Describe the bug

I tried to build a simple SPA app using react-router (using the Framwork mode) and PrimeReact as UI component library. Dev-Mode (run npm dev) runs just fine but building for production returns the following error:

> [email protected] build
> react-router build

vite v6.3.5 building for production...
✓ 52 modules transformed.
build/client/.vite/manifest.json                  1.46 kB │ gzip:  0.38 kB
build/client/assets/root-DMeMvrIX.css             0.02 kB │ gzip:  0.04 kB
build/client/assets/root-4yxUZWD5.js              0.90 kB │ gzip:  0.53 kB
build/client/assets/index-HSk3ZO2X.js             3.95 kB │ gzip:  1.55 kB
build/client/assets/api.esm-BaowmBN3.js           6.14 kB │ gzip:  2.57 kB
build/client/assets/home-DSQmwM_l.js             88.17 kB │ gzip: 22.86 kB
build/client/assets/chunk-PVWAREVJ-D513GI-F.js  112.89 kB │ gzip: 38.07 kB
build/client/assets/entry.client-Lv1_BQlD.js    182.76 kB │ gzip: 58.25 kB
✓ built in 1.42s
vite v6.3.5 building SSR bundle for production...
✓ 5 modules transformed.
build/server/.vite/manifest.json               0.23 kB
build/server/assets/server-build-DMeMvrIX.css  0.02 kB
build/server/index.js                          5.99 kB

✓ 1 asset cleaned from React Router server build.
build\server\assets\server-build-DMeMvrIX.css

✗ Build failed in 71ms
[react-router] Directory import 'D:\react-router_primeReact\node_modules\primereact\utils' is not supported resolving ES modules imported from D:\react-router_primeReact\node_modules\primereact\api\api.esm.js
Did you mean to import "primereact/utils/utils.cjs.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:263:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
    at ModuleLoader.#cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:586:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:135:49) {
  code: 'PLUGIN_ERROR',
  url: 'file:///D:/react-router_primeReact/node_modules/primereact/utils',
  pluginCode: 'ERR_UNSUPPORTED_DIR_IMPORT',
  plugin: 'react-router',
  hook: 'writeBundle'
}

PrimeReact appears to use non conformant directory imports.

See also: https://github.com/remix-run/react-router/issues/14350

Reproducer

https://github.com/ferdi-github/react-router_primeReact

System Information

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 PRO 6850U with Radeon Graphics     
    Memory: 6.88 GB / 30.77 GB
  Binaries:
    Node: 22.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (140.0.3485.54)
  npmPackages:
    @react-router/dev: 7.8.2 => 7.8.2 
    @react-router/node: 7.8.2 => 7.8.2 
    react-router: 7.8.2 => 7.8.2 
    vite: ^6.3.3 => 6.3.5

Steps to reproduce the behavior

1. Create minimal app with react-router and PrimeReact
2. Configure react-router.config.tsto emit a SPA (no SSR)
3. Use at least PrimeReactProvider
4. Run npm run build
5. Build error

Expected behavior

Protuction build should run successfully.

[haroonfoad]

Is this issue with a specific version of primereact or with any versions? Do you know a primereact version that does not have this issue we can use?

[ferdi-github]

I've tested the following versions of PrimeReact:

• 10.9.7
• 10.9.0
• 10.8.0
• 10.7.0

All of them produced the same error.

Since we're starting from scratch, I can't provide a working setup.

[haroonfoad]

In my case, I don't get error when building the app, but when running the app from build "start": "react-router-serve ./build/server/index.js"

[ferdi-github]

I updated node to the latest LTS version (v22.20.0), but I'm still getting the same error.

[kushagra-paypay]

ESM doesn't do directory imports - primereact will have to fix it

Quick Fix for now if you are doing SSR in Framework mode is to add

ssr: { noExternal: ['primereact'] }

to your vite.config, this tells vite to bundle primereact into your server build instead of treating it as an external node module, so directory imports are resolved at build time (by rollup) instead of at runtime by Node.js