React Native web in SSR crash/does not work

[zoriya]

Describe the bug

I want to run react-native-web in an SSR context, this already works with Next.js, but I want to migrate from next to vite. I first tried with vike but I go an issue (logs & repro below for context). Link to the thread with @brillout: vikejs/vike#1637

I can reproduce the error with both vike (reproduction repo: https://github.com/zoriya/vike-react-native-web-bug or https://github.com/brillout/vike-react-native-web-bug where @brillout tried to fix some issues) or with vanilla vite (https://stackblitz.com/edit/rnw-ssr-vite).

Reproduction

https://stackblitz.com/edit/rnw-ssr-vite

Steps to reproduce

In stackblitz: npm i && npm run dev
In the vike repro: yarn && yarn dev

System Info

❯ npx envinfo --system --npmPackages '{vite,@vitejs/*,rollup}' --binaries --browsers

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.2.10 => 5.2.11

Used Package Manager

yarn

Logs

Stackblitz logs

❯ yarn dev --debug
yarn run v1.22.19
$ node server --debug
Server started at http://localhost:5173
5:01:47 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/modules/prefixStyles/index.js:
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/projects/rnw-ssr-vite/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at async instantiateModule (file:///home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55107:9)

5:01:47 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/exports/StyleSheet/compiler/index.js: failed to import "/node_modules/react-native-web/dist/modules/prefixStyles/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/projects/rnw-ssr-vite/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at async instantiateModule (file:///home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55107:9)

5:01:47 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/exports/StyleSheet/index.js: failed to import "/node_modules/react-native-web/dist/exports/StyleSheet/compiler/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/projects/rnw-ssr-vite/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at async instantiateModule (file:///home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55107:9)

5:01:47 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/modules/createDOMProps/index.js: failed to import "/node_modules/react-native-web/dist/exports/StyleSheet/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/projects/rnw-ssr-vite/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at async instantiateModule (file:///home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55107:9)

5:01:47 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/exports/createElement/index.js: failed to import "/node_modules/react-native-web/dist/modules/createDOMProps/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/projects/rnw-ssr-vite/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at async instantiateModule (file:///home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55107:9)

5:01:47 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/index.js: failed to import "/node_modules/react-native-web/dist/exports/createElement/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/projects/rnw-ssr-vite/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at async instantiateModule (file:///home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55107:9)

5:01:47 PM [vite] Error when evaluating SSR module /src/App.jsx: failed to import "/node_modules/react-native-web/dist/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/projects/rnw-ssr-vite/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at async instantiateModule (file:///home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55107:9)

5:01:47 PM [vite] Error when evaluating SSR module /src/entry-server.jsx: failed to import "/src/App.jsx"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/projects/rnw-ssr-vite/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at async instantiateModule (file:///home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55107:9)

Error: `line` must be greater than 0 (lines start at line 1)
    at originalPositionFor$1 (/home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:10454:15)
    at eval (/home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54921:25)
    at eval (/home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54912:21)
    at ssrRewriteStacktrace (/home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54911:10)
    at ssrFixStacktrace (/home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54964:24)
    at Object.ssrFixStacktrace (/home/projects/rnw-ssr-vite/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:64837:13)
    at eval (/home/projects/rnw-ssr-vite/server.js:73:11)
error Command failed with exit code 1.

Vike errors (differents)

3:01:35 PM [vike][request(1)] HTTP request: /
3:01:35 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/modules/prefixStyles/index.js:
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/zoriya/projects/bati-vike/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at instantiateModule (file:///home/zoriya/projects/bati-vike/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

3:01:35 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/exports/StyleSheet/compiler/index.js: failed to import "/node_modules/react-native-web/dist/modules/prefixStyles/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/zoriya/projects/bati-vike/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at instantiateModule (file:///home/zoriya/projects/bati-vike/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

3:01:35 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/exports/StyleSheet/index.js: failed to import "/node_modules/react-native-web/dist/exports/StyleSheet/compiler/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/zoriya/projects/bati-vike/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at instantiateModule (file:///home/zoriya/projects/bati-vike/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

3:01:35 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/modules/createDOMProps/index.js: failed to import "/node_modules/react-native-web/dist/exports/StyleSheet/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/zoriya/projects/bati-vike/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at instantiateModule (file:///home/zoriya/projects/bati-vike/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

3:01:35 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/exports/createElement/index.js: failed to import "/node_modules/react-native-web/dist/modules/createDOMProps/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/zoriya/projects/bati-vike/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at instantiateModule (file:///home/zoriya/projects/bati-vike/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

3:01:35 PM [vite] Error when evaluating SSR module /node_modules/react-native-web/dist/index.js: failed to import "/node_modules/react-native-web/dist/exports/createElement/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/zoriya/projects/bati-vike/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at instantiateModule (file:///home/zoriya/projects/bati-vike/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

3:01:35 PM [vite] Error when evaluating SSR module /pages/index/+Page.tsx: failed to import "/node_modules/react-native-web/dist/index.js"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/zoriya/projects/bati-vike/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at instantiateModule (file:///home/zoriya/projects/bati-vike/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

3:01:35 PM [vite] Error when evaluating SSR module virtual:vike:pageConfigValuesAll:server:/pages/index: failed to import "/pages/index/+Page.tsx"
|- TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/zoriya/projects/bati-vike/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at instantiateModule (file:///home/zoriya/projects/bati-vike/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

3:01:35 PM [vike][request(1)][Error] An error was thrown:
TypeError: __vite_ssr_import_0__.default is not a function
    at eval (/home/zoriya/projects/bati-vike/node_modules/react-native-web/dist/modules/prefixStyles/index.js:7:46)
    at instantiateModule (file:///home/zoriya/projects/bati-vike/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)
3:01:35 PM [vike][request(1)] HTTP response / 500

Vike errors from @brillout fork

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.
8:15:48 PM [vike][request(1)] Following error was thrown by the onRenderHtml() hook defined at vike-react/renderer/onRenderHtml
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext6 (/home/rom/tmp/vike-react-native-web-bug/node_modules/.vite/deps_ssr/react-native-web.js?v=97d047a8:3119:29)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• rnw-ssr-vite (Open reproduction)