React native web error: __vite_ssr_import_0__.default is not a function

[zoriya]

Description

To reproduce:

Simply clone the repro from: https://github.com/zoriya/vike-react-native-web-bug
OR:

• Create a new vike app (I used yarn create @batijs/app --react)
• Install react-native, react-native-web & vite-plugin-react-native-web
• Add reactNativeWeb to the vite.config.ts (like in the sample below), the project now works if ssr: false is set in the +config

import ssr from "vike/plugin";
import react from "@vitejs/plugin-react";
import reactNativeWeb from "vite-plugin-react-native-web";
import { defineConfig } from "vite";

export default defineConfig({
	plugins: [react({}), ssr({}), reactNativeWeb()],
});

If ssr is enabled (ssr: true in +config), the following error happens (please note that using ssr.noExternal or vite-plugin-cjs-interop does not fix the issue):

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

[brillout]

I don't think this is related to Vike, but let me know if you have evidence that links this to Vike.

[brillout]

I recommend to also reach out to the react native web maintainer.

[zoriya]

necolas/react-native-web#2668

[zoriya]

I added inline-style-prefixer to the list of csInterop dependencies on the vanilla vite repro and got a different error than with vike (an import error instead of a hook error). You can see logs on the rnw issue above and here is the repro: https://github.com/zoriya/vite-rnw-ssr-repro

[brillout]

The error you're getting can be fixed with https://github.com/brillout/vike-react-native-web-bug/blob/953670a90f46a89511c004d5b9f13fa850a09091/vite.config.ts#L14-L18 and you'll likely get the same hook error then.

[zoriya]

Thanks, I do get the same issue now.

[zoriya]

Is there a go-to way of fixing esmodules upstreams? For example, @expo/html-elements ships esm code but do not use extensions in export/imports. (as in import Text from "./Text"; instead of from "./Text.js").

I could not find a way to ignore this locally (via a vite option or using bun) and I don't know what's the way to fix upstream. Note that inline-style-prefixer has the same issue in its esm build (see robinweser/inline-style-prefixer#232).

[brillout]

Maybe you can try to pre-bundle them with Wepack? In theory that should fix the situation for good, but you may need to dedupe React so that could be tricky as well.

[brillout]

Or with esbulid (much faster) if it works.