Vite in a SSR context

[zoriya]

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

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:

vikejs/vike#1637
vitejs/vite#16679

[zoriya]

Turns out, import errors can be fixed by adding react-native-web to the list ssr.optimizeDeps.include like so:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import reactNative from "vite-plugin-react-native-web";
import { cjsInterop } from "vite-plugin-cjs-interop";

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		react(),
		reactNative(),
		cjsInterop({
			dependencies: ["inline-style-prefixer", "inline-style-prefixer/**"],
		}),
	],
	ssr: {
		optimizeDeps: {
			include: ["react-native-web"],
		},
	},
});

Now the error is really wild while using a react-native-web componant in SSR:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext6 (/home/zoriya/projects/rnw-ssr-vite/node_modules/.vite/deps_ssr/react-native-web.js?v=7a5478b2:3119:29)
    at /home/zoriya/projects/rnw-ssr-vite/node_modules/.vite/deps_ssr/react-native-web.js?v=7a5478b2:29254:32
    at renderWithHooks (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
    at renderForwardRef (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5846:18)
    at renderElement (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6009:11)
    at renderNodeDestructiveImpl (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderChildrenArray (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6215:7)
    at renderNodeDestructiveImpl (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6145:7)
    at renderNodeDestructive (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderElement (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5975:9)
    at renderNodeDestructiveImpl (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderIndeterminateComponent (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
    at renderElement (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderElement (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5975:9)
    at renderNodeDestructiveImpl (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at retryTask (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6532:5)
    at performWork (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6580:7)
    at /home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6904:12
    at scheduleWork (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:78:3)
    at startWork (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6903:3)
    at renderToStringImpl (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6977:3)
    at Object.renderToString (/home/zoriya/projects/rnw-ssr-vite/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:7065:10)
    at render (/home/zoriya/projects/rnw-ssr-vite/src/entry-server.jsx:6:31)
    at file:///home/zoriya/projects/rnw-ssr-vite/server.js:54:28

(thanks @brillout for finding this)

[brillout]

Vike author here, this affects all Vite-based SSR frameworks. Not only Vike but also Remix, etc. Thus RNW cannot be used in all these frameworks.

[necolas]

The logs make it obvious where the first problem lies:

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

"module is not defined" at "react-native-web/dist/vendor/react-native/Utilities/clamp.js"

There's a stray module.exports instead of export in this file, which the bundler is probably having issues with in a Node env:

https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/vendor/react-native/Utilities/clamp.js#L23

Try fixing that and submitting a PR

[zoriya]

So I fixed that and the issue with hooks went away, I was not expecting that. I guess it's because using ssr.optimizeDeps.include also included dependencies like react.

I also looked at inline-style-prefixer, that you include via it's cjs entrypoint (/lib). I could not make it run via it's ejs entrypoint, which I think is due to an upstream bug. I'll try to fix this too soon.