(docs) React / Express SSR CodeSandbox example has SSR module-format issues in a fresh environment

[reneemundie]

🐛 Current behavior

The CodeSandbox example SSR with Express linked in our docs Server-side rendering appears to be broken in a fresh environment due to SSR module-format inconsistencies.

• The SSR build produces a CommonJS-style server bundle

• That bundle attempts to require() ESM modules from instantsearch.js/es/...

• This results in:

  • Error [ERR_REQUIRE_ESM]: require() of ES Module ... not supported

When adjusting the setup to resolve this (e.g. switching the SSR output to ESM), the server then fails at runtime because the example still relies on CommonJS globals such as __dirname.

As a result, the example requires manual changes to run successfully.

---

Note

I was able to get the example working with the following changes:

• remove vite-plugin-commonjs
• adjust the SSR setup to avoid emitting CommonJS requiring ESM modules
• update src/server.jsx to replace __dirname with the import.meta.url + fileURLToPath pattern

This suggests the current example mixes CommonJS and ESM assumptions in a way that no longer works in a fresh environment.

🔍 Steps to reproduce

1. Open the CodeSandbox example:
   https://codesandbox.io/s/github/algolia/instantsearch/tree/master/examples/react/ssr?file=/src/App.js

2. Let the sandbox run its default task (yarn start)

3. Observe the SSR build and server startup

4. The server fails during startup with:

   • Error [ERR_REQUIRE_ESM]: require() of ES Module ... not supported

5. If the SSR setup is then adjusted to avoid the initial module-format error, a follow-up runtime issue appears because the server entry still relies on CommonJS globals:

   • ReferenceError: __dirname is not defined in ES module scope

Live reproduction

https://codesandbox.io/p/devbox/modest-star-zqwmfx

💭 Expected behavior

The example should run successfully in a fresh CodeSandbox environment without requiring manual changes.

Specifically:

• the SSR build should complete without module-format/runtime errors
• the server should start correctly
• the published example configuration and server entry should be internally consistent
• users should be able to open the sandbox and see the SSR example running immediately

Package version

@vitejs/plugin-react 4.2.1, vite 5.0.7, algoliasearch 5.1.1, algoliasearch-helper 3.28.1, express 4.17.1, instantsearch-ui-components 0.23.0, react 19.0.0, react-dom 19.0.0, react-instantsearch 7.29.0, react-instantsearch-core 7.29.0

Operating system

No response

Browser

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Haroenv]

Thanks @reneemundie, the changes you suggest seem correct, do you mind opening a pull request with a version of the plain server side rendering example that fully works? Thanks!