RR Vite plugin build command lifecycle differs from the dev one

[sneridagh]

I'm using React Router as a...

framework

Reproduction

I have a custom Vite Plugin that generates a file with additional routes for my RR7 app. For more information, this Vite plugin is a pre plugin.

It worked well until we updated to 7.2.0 where it broke when building. In dev it works well. In order to prove that the plugin is just ignored I even broke the Vite plugin code, and it did not errored (while in dev did).

I'm sorry right now I can't post a reproduction repo, also it would be hard to explain in detail what the Vite plugin does and how to test that it does not work. If really needed I can try, but I'm hoping that this rings some bells.

When 7.1.5 is used, it works perfectly, as it used to.

System Info

System:
    OS: macOS 15.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 409.00 MB / 64.00 GB
    Shell: 5.1.12 - /opt/homebrew/bin/bash
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 10.4.1 - ~/.nvm/versions/node/v22.14.0/bin/pnpm
    Watchman: 2024.06.10.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 133.0.6943.127
    Safari: 18.3

Used Package Manager

pnpm

Expected Behavior

My custom Vite plugin is executed in build mode. In 7.1.5 is used, it works perfectly, as it used to.

Actual Behavior

My custom Vite plugin seems that does not run in build mode, but it does in dev mode.

[LucasOe]

I just tried replicating this issue using rollup-plugin-dedent, which I published yesterday.

I'm using the plugin in Vite, and it also uses enforce: "pre" to transform code, and I can't seem to replicate the issue, using React Router version 7.2.0. The package works for in dev and build mode for me.

[sneridagh]

ok, then maybe it's a strange interaction with the pnpm monorepo setup we are using.

I cleaned up some things so, in this branch:

https://github.com/plone/volto/tree/7

It's using RR 7.1.5, the command pnpm build (which does pnpm --filter seven build) works as expected (see CI actions are green).

This branch:

plone/volto#6774

is created from the previous but using RR 7.2.0 and it's failing (see CI red actions):

https://github.com/plone/volto/actions/runs/13461807540/job/37618720542?pr=6774

for the same command.

As said, I tried to debug it, and the code does not reach the plugin in build mode whereas in dev it does.

[markdalgleish]

@sneridagh Are you able to create a minimal repro? Looking at your CI output and reproducing locally, it looks like your routes.ts file is trying to import a file that doesn't exist (import applyAddonConfiguration, { addonsInfo } from '../registry.loader';). If you can figure out the core issue and isolate it into its own repro I'll be able to look into this further.

[sneridagh]

@markdalgleish hey, thanks for taking a look.
Let me explain a bit, this plugin creates the file ../registry.loader in the code base, so it can be read on boot. It contains the definition of routes that are being read in other modules that act as add-ons. After that, these routes are added to the main app routes.ts.

I can put together an even minimum version, in a separated repo, but the error given will be the same, since the file that is expected to be generated, it won't be generated. Then RR7 will complain about the routes.ts import of that file is not there.

[sneridagh]

Edited, see now: #13078 (comment)

@markdalgleish ok, using a bare app and released packages work:

https://github.com/sneridagh/my-react-router-app

But what in the world could be that in a pnpm monorepo using 7.1.5 work, and upgrading to 7.2.0 does not?

[sneridagh]

Ok, I think I've pinpointed the problem. It seems that it's a timing problem, in 7.1.5 my plugin finalized the creation of the file before the routes.ts file was evaluated, and now it does not.

@markdalgleish Did you change how the processes that take place in the RR7 plugin so they can take precedence before our plugin? If it's not this, I don't know what could cause the timing issue... a reminder that in dev, it also works well in 7.2.0, the timing issue is only present on build.

[sneridagh]

Update: I wasn't trying to load the file in my minimal reproduction, so it passed (obviously), sorry for the noise. Now it breaks like in my update to 7.2.0 branch.

Please check it now:

https://github.com/sneridagh/my-react-router-app

in dev works, in build mode it does not.

[sneridagh]

@markdalgleish

I've digged in the code, specially your last PR introducing the support for the Vite 6 environments API. I think that after that, the build command checks for the validity of routes.ts before the Vite plugins are evaluated, while in dev, this is the other way around. That's why it still works in dev. I've updated the title of the issue accordingly.

I understand that it might not be an issue for you, and you really want that this has to be the behavior of the build command from now on. As you could see in the timeline I've already workarounded it.

However, in other scenarios could be that this is still relevant for other people, that want to have some pre-processing before routes.ts is evaluated. I think that the default expectation is that the behavior and order of tasks performed by the dev and build commands are (mostly) the same, specially to how RR plays with the other Vite plugins that might be present.

Thanks for the attention and support, and keep up the good work!

[markdalgleish]

@sneridagh You said the build in your repro isn't working, but seems to work for me. Here's the full set of commands I'm running:

git clone [email protected]:sneridagh/my-react-router-app.git
cd my-react-router-app
pnpm install
pnpm build

Here's the output I'm seeing:

> react-router build

vite v5.4.14 building for production...
✓ 47 modules transformed.
build/client/.vite/manifest.json                  1.88 kB │ gzip:  0.49 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-gOj8GGao.css             7.75 kB │ gzip:  2.29 kB
build/client/assets/with-props-Db1jVSdq.js        0.35 kB │ gzip:  0.21 kB
build/client/assets/root-Cn38pYoF.js              1.13 kB │ gzip:  0.64 kB
build/client/assets/home-33KROPrQ.js              3.74 kB │ gzip:  1.72 kB
build/client/assets/chunk-HA7DTUK3-DItZKCSJ.js  107.32 kB │ gzip: 36.16 kB
build/client/assets/entry.client-BFhZpkrh.js    178.91 kB │ gzip: 56.76 kB
✓ built in 447ms
vite v5.4.14 building SSR bundle for production...
✓ 10 modules transformed.
build/server/.vite/manifest.json                0.58 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-gOj8GGao.css   7.75 kB
build/server/index.js                          11.13 kB
✓ built in 36ms

Is there something else I'm meant to be looking for?

[sneridagh]

@markdalgleish sorry, my bad, I thought I pushed the changes :( I'm really sorry for this.

Now I've pushed the changes, where you could see that the required file is being generated by the dev script, while the build script it does not, thus the routes.ts import fails.

[markdalgleish]

Thanks for updating the repro. I've just merged a PR that fixes the build step for the repro you provided, it'll be out in the next release: #13513

As the PR describes, we now avoid evaluating routes.ts until we need it, which is within a Vite context after the plugins have been loaded.

I tested it using this experimental release if you want to try it out in the meantime: 0.0.0-experimental-ab0e85b04

[sneridagh]

@markdalgleish I tested it, and it does work like a charm. Thanks a lot!!!

[github-actions]

🤖 Hello there,

We just published version 7.6.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 7.6.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!