Skip to content

PrimeReact not usable when building a SPA with react-router #8294

@ferdi-github

Description

@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: remix-run/react-router#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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions