Build errors after adding UI library in a project started from a Cloudflare template

[hudochenkov]

Reproduction

https://github.com/hudochenkov/react-router-cloudflare-issues/tree/mantine

or

https://github.com/hudochenkov/react-router-cloudflare-issues/tree/chakraui

I shared two branches, but they are almost the same. The only difference is the last commit, when UI library is added to the project.

System Info

System:
    OS: macOS 15.5
    CPU: (8) arm64 Apple M1
    Memory: 469.09 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 11.4.2 - /usr/local/bin/npm
    pnpm: 10.4.1 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 138.0.7204.101
    Safari: 18.5
  npmPackages:
    @react-router/dev: ^7.6.3 => 7.6.3 
    react-router: ^7.6.3 => 7.6.3 
    vite: ^7.0.4 => 7.0.4

Used Package Manager

npm

Expected Behavior

npm run build runs without errors.

npm run dev runs for the first time (after clean install) without errors.

Actual Behavior

I'm sorry if reproduction is not minimal. I did only two changes to the official template: update dependencies, add third-party React component to the app/root.tsx.

1. I've started a project from a Cloudflare template:

   npx create-react-router@latest --template remix-run/react-router-templates/cloudflare
   

2. Updated dependencies to the latest versions.

3. As soon I add any component to app/root.tsx from a UI library (I tried Mantine and Chakra UI) build has an error.

Error 1

npm run build shows error:

rendering chunks (1)...✘ [ERROR] The build was canceled

Full output

> react-router build

Using Vite Environment API (experimental)
vite v7.0.4 building for production...
✓ 755 modules transformed.
rendering chunks (1)...✘ [ERROR] The build was canceled

build/client/.vite/manifest.json                  1.37 kB │ gzip:  0.40 kB
build/client/assets/logo-dark-pX2395Y0.svg        6.10 kB │ gzip:  2.40 kB
build/client/assets/logo-light-CVbx2LBR.svg       6.13 kB │ gzip:  2.41 kB
build/client/assets/root-B3qjF2nw.css             7.74 kB │ gzip:  2.40 kB
build/client/assets/home-B6R-O0X2.js              3.82 kB │ gzip:  1.74 kB
build/client/assets/root-BmFYxJZb.js             25.38 kB │ gzip:  7.86 kB
build/client/assets/chunk-QMGIS6GS-BTxNMA9M.js  116.13 kB │ gzip: 39.18 kB
build/client/assets/entry.client-BFN32GqJ.js    181.40 kB │ gzip: 57.27 kB
✓ built in 1.66s
vite v7.0.4 building SSR bundle for production...
✓ 752 modules transformed.
build/server/.vite/manifest.json                 0.98 kB
build/server/wrangler.json                       1.14 kB
build/server/assets/logo-dark-pX2395Y0.svg       6.10 kB
build/server/assets/logo-light-CVbx2LBR.svg      6.13 kB
build/server/assets/server-build-B3qjF2nw.css    7.74 kB
build/server/index.js                            0.07 kB
build/server/assets/app-DJ3BIgKz.js            233.80 kB
build/server/assets/server-build-BtA9_COw.js   495.78 kB
✓ built in 946ms

Error 2

npm run dev shows this error on the first run, when there are not Vite cache (/node_modules/.vite and node_modules/.vite-child-compiler directories):

Application Error
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (http://localhost:5173/node_modules/.vite/deps/chunk-QH6HOCAD.js?v=c0dfb998:899:27)
    at useFrameworkContext (http://localhost:5173/node_modules/.vite/deps/chunk-AXXAYFML.js?v=c0dfb998:8561:24)
    at Meta (http://localhost:5173/node_modules/.vite/deps/chunk-AXXAYFML.js?v=c0dfb998:8771:37)
    at react-stack-bottom-frame (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=e0b8c0e2:17422:20)
    at renderWithHooks (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=e0b8c0e2:4204:24)
    at updateFunctionComponent (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=e0b8c0e2:6617:21)
    at beginWork (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=e0b8c0e2:7652:20)
    at runWithFiberInDEV (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=e0b8c0e2:1483:72)
    at performUnitOfWork (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=e0b8c0e2:10866:98)
    at workLoopSync (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=e0b8c0e2:10726:43)

Next runs of npm run dev have no errors. If I delete Vite cache, error appears again on the first run.

Few thoughts

npx vite build --debug doesn't show any clues or additional info for an error.

Since issue is happening with two UI libraries, I think problem is not in these libraries.

Maybe it's an issues with @cloudflare/vite-plugin. It's the first time I use React Router. And the first time I use Cloudflare. It's hard to tell what software causes an error.

[timdorr]

I believe this is related to remix-run/remix#10455

[hudochenkov]

I tried to disable lazy route discovery as was suggested in the linked issue. Unfortunately, no improvements happened. Both issues are still observed.