Adding vite plugins with CJS build only will result in errors

[lionelhorn]

Adding vite plugins following this guide : https://react-server.dev/guide/framework/configuration

// react-server.config.ts

import Inspect from 'vite-plugin-inspect'

export default {
  plugins: [
    Inspect(),
  ]
}

Will create what appears like a bundle (react-server.config.ts.39a5aafe.mjs) in /.react-server using react-server.config.ts as an entrypoint.

which will create an error if any plugin is or has deps with a CJS only build

Error: Dynamic require of "fs" is not supported
    at file:///C:/PROG/_experiments/_tmp/my-first-application/.react-server/react-server.config.ts.39a5aafe.mjs:1:382
    at file:///C:/PROG/_experiments/_tmp/my-first-application/.react-server/react-server.config.ts.39a5aafe.mjs:1:12396
    at file:///C:/PROG/_experiments/_tmp/my-first-application/.react-server/react-server.config.ts.39a5aafe.mjs:1:494
    at file:///C:/PROG/_experiments/_tmp/my-first-application/.react-server/react-server.config.ts.39a5aafe.mjs:12:6150
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:485:26)
    at async loadConfig (file:///C:/PROG/_experiments/_tmp/my-first-application/node_modules/.pnpm/@lazarv+react-server@0.0.0-experimental-1ebed9f-20240709-604f6b67_@types+node@20.14.10_react-_6c2sbkclap3cav5wojpnsvlz5i/node_modules/@lazarv/react-server/config/index.mjs:59:11)
    at async Module.dev (file:///C:/PROG/_experiments/_tmp/my-first-application/node_modules/.pnpm/@lazarv+react-server@0.0.0-experimental-1ebed9f-20240709-604f6b67_@types+node@20.14.10_react-_6c2sbkclap3cav5wojpnsvlz5i/node_modules/@lazarv/react-server/lib/dev/action.mjs:23:20)
    at async file:///C:/PROG/_experiments/_tmp/my-first-application/node_modules/.pnpm/@lazarv+react-server@0.0.0-experimental-1ebed9f-20240709-604f6b67_@types+node@20.14.10_react-_6c2sbkclap3cav5wojpnsvlz5i/node_modules/@lazarv/react-server/bin/cli.mjs:76:3

Similarly to https://github.com/IndexXuan/vite-plugin-env-compatible/issues/13

[lazarv]

Hi @lionelhorn! First of all thank you for reporting this issue and also providing all the details!

The temporary file react-server.config.ts.39a5aafe.mjs is created in the .react-server directory because you use TypeScript in your config file and the framework needs to pre-compile it.

I quickly tested using vite-plugin-inspect in react-server.config.mjs without TypeScript and while it only inspects client components, it works on http://localhost:3000/__inspect (not on port 5173 as the default port for the framework is different)!

The plugin also works when using it from vite.config.ts, so this is clearly a TypeScript config compilation issue. I will investigate it further and fix it probably quickly.

As this framework uses the new Vite Environment API, the vite-plugin-inspect Vite plugin also needs to handle all environments and needs to be updated to provide insights in all environments, including RSC and SSR.

[lazarv]

@lionelhorn a new version is available now on npm which should resolve this issue. To correct my statement above, vite-plugin-inspect do show some changes in it's SSR mode, but that's actually the RSC environment. There's PR in the works which will be much better for this framework, but it has breaking changes at https://github.com/antfu-collective/vite-plugin-inspect/pull/113.

For Vite specific configuration like adding plugins I would rather use vite.config.ts and I would only use react-server.config.ts/json for framework specific entries. But both should work and the choice is yours.

[lionelhorn]

@lazarv Thanks for the quick fix and the PR link.

If using vite.config.ts, I assume I'll still start the dev process with the react-server cli.

Wondering if it will display the usual vite console message Like

  VITE v5.3.3  ready in 398 ms
  ➜  Local:   http://127.0.0.1:5174/
  ➜  Inspect: http://127.0.0.1:5174/__inspect/

I actually started by adding plugins to vite.config.ts, but as nothing was displayed in the console regarding the inspect plugin. I assumed I did something wrong or it didn't work.

[lazarv]

It's understandable that it was not clear if it's worked or not. The framework is using Vite in middleware mode and Vite is not capable on it's own to print URLs where the server is listening on in this mode. vite-plugin-inspect is using Vite's internal printUrls function to show where the developer can access the inspect UI. With the latest change the framework is now communicating the available URLs to Vite and calling the same printUrls function, so vite-plugin-inspect and all other plugins patching Vite's printUrls function should work properly. So please update to the latest version.

Even when you have a vite.config.ts you need to use the react-server CLI to start your application.

[github-actions[bot]]

This issue has been locked since it has been closed for more than 30 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest version of @lazarv/react-server. If you have any other comments you should create a new discussion.