primefaces / primefaces/primereact

PrimeReact not usable when building a SPA with react-router

Open
#8,294 6 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Resolution: Workaround
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

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:

> react-router-prime-react@1.0.0 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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproducer, react-router.config.ts, and the failing import reported in node_modules/primereact/api/api.esm.js. Run npm run build with the listed React Router and PrimeReact setup, then trace how the primereact/utils import is resolved during the production build. Done means the minimal SPA production build completes successfully.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, react, vite
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.