Comments (4)
zoriya
commented on June 2, 2024
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)
from react-native-web.
brillout
commented on June 2, 2024
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.
from react-native-web.
necolas
commented on June 2, 2024
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:
Try fixing that and submitting a PR
from react-native-web.
zoriya
commented on June 2, 2024
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.
from react-native-web.
Related Issues (20)
- Is 50ms press delay really necessary? Can't be configurable? HOT 1
- Typescript support HOT 1
- tabIndex doesn't work for values more than 0 HOT 4
- react-native-web with server side rendering boilerplate HOT 1
- role="switch" should map to element <button> HOT 2
- useWindowDimensions().fontScale doesn't return the expected result on mobile browsers HOT 2
- Image in SSR
- Pressable does not accept aria-disabled HOT 2
- Add `draggable` prop to `<Text />`
- Image isn't support aspectRatio style
- onResponderEnd not called when tabbing while holding onto a view HOT 2
- VirtializedList on web error to scroll inverter. Unable to preventDefault inside passive event listener invocation
- onKeyDown is not registered until component is clicked.
- Appearance does not export `setColorScheme`
- Accessibility migration from react native web 18 to 19 is broken HOT 1
- CSS Style not Inline
- Add "use client" directive for a proper usage with Next App Router HOT 3
- `AppState.isAvailable` is a string instead of a boolean
- When releasing a new version, create a new GitHub "release" HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-web.