Vite in a SSR context

Author: zoriyaCreated May 15, 2024Updated Mar 30, 2026

Labelsbug

Is there an existing issue for this?

I have searched the existing issues

Describe the issue

When using react-native-web with vite in SSR, it simply does not work. There seems to be due to issues with commonjs/modules handling.

After adding "inline-style-prefixer" to the list of commonJS packages to fix, rnw fails to load due to a module error on vendor/react-native/Utilities/clamp.js

Complete logs

bash

1:41:16 AM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:
|- ReferenceError: module is not defined
    at eval (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:13:1)
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

1:41:16 AM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js: failed to import "/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js"
|- ReferenceError: module is not defined
    at eval (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:13:1)
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

1:41:16 AM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/vendor/react-native/FlatList/index.js: failed to import "/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js"
|- ReferenceError: module is not defined
    at eval (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:13:1)
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

1:41:16 AM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/exports/FlatList/index.js: failed to import "/node_modules/react-native-web/dist/vendor/react-native/FlatList/index.js"
|- ReferenceError: module is not defined
    at eval (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:13:1)
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

1:41:16 AM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/vendor/react-native/Animated/components/AnimatedFlatList.js: failed to import "/node_modules/react-native-web/dist/exports/FlatList/index.js"
|- ReferenceError: module is not defined
    at eval (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:13:1)
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

1:41:16 AM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/vendor/react-native/Animated/Animated.js: failed to import "/node_modules/react-native-web/dist/vendor/react-native/Animated/components/AnimatedFlatList.js"
|- ReferenceError: module is not defined
    at eval (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:13:1)
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

1:41:16 AM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/exports/Animated/index.js: failed to import "/node_modules/react-native-web/dist/vendor/react-native/Animated/Animated.js"
|- ReferenceError: module is not defined
    at eval (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:13:1)
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

1:41:16 AM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/index.js: failed to import "/node_modules/react-native-web/dist/exports/Animated/index.js"
|- ReferenceError: module is not defined
    at eval (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:13:1)
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

1:41:16 AM [vite] Error when evaluating SSR module /src/App.jsx: failed to import "/node_modules/react-native-web/dist/index.js"
|- ReferenceError: module is not defined
    at eval (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:13:1)
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

1:41:16 AM [vite] Error when evaluating SSR module /src/entry-server.jsx: failed to import "/src/App.jsx"
|- ReferenceError: module is not defined
    at eval (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:13:1)
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

ReferenceError: module is not defined
    at /home/zoriya/projects/rnw-ssr-vite/node_modules/react-native-web/dist/vendor/react-native/Utilities/clamp.js:11:1
    at instantiateModule (file:///home/zoriya/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

Expected behavior

SSR should work on vite

Steps to reproduce

Create a new vite with ssr project
install vite-plugin-react-native-web to replace react-native imports with react-native-web
install vite-plugin-cjs-interop and add inline-style-prefixer to the list of packages to interop
Start the project and acess a page

Test case

https://github.com/zoriya/vite-rnw-ssr-repro

Additional comments

With @brillout, the creator of Vike (a SSR framework for vite), we tried to debug this the best we can, you can find our discussion and the vite issue below:

https://github.com/vikejs/vike/discussions/1637 https://github.com/vitejs/vite/issues/16679

Source: necolas/react-native-web

View original on GitHub View discussion on GitHub