-
Notifications
You must be signed in to change notification settings - Fork 27k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for React Native Web? #858
Comments
Currently, you could do webpack aliases very easily with our custom webpack config support. But you need to alias that on the Node.js side as well. We don't cover that yet. (But soon. See: #767) Anyway, even for now you could use do it using a custom |
Integrating this with React Native Web (maybe by bringing the routing functionality as a React Native component?) would make React super-universal in that it could be rendered server-side, browsers, and mobile apps all from the same codebase. |
Any update on this? |
@scf4 Have a look at our preact example.
|
@scf4 here is a working boilerplate with It still have limit at server-side generated styles (created by React Native's StyleSheet).. We could actually improve Next.js server-side rendering code to support it.. by extract Their code (from react-native-web documentation):
|
By the way, here is a good solution for SSR styles with react native web: The code in that link is out-dated, we need this instead (which I think is more elegant thanks to new updates from
|
maybe a bit late to the party, but thought it might help someone. {
"presets": [
"es2015",
"react",
"next/babel"
],
"plugins": [
[
"module-resolver",
{
"alias": {
"react-native": "react-native-web"
}
}
]
]
} |
@cloudle Were you able to get |
I'm having the same issue with
|
@joncursi I wasn't able to get it to compile after a couple of days of wrestling with it. I tried various combos of compiling In the end I decided to give up on |
Has anyone got react-native-web, next.js, and lerna working together? I opened an issue here, but also will check with this thread. No matter what I have tried (see the other issue for what I tried), I keep getting |
I removed next.js and used webpack directly with the following configuration file:
Then I went back and merged part of this configuration into my next.config.js file.
It looks like next.js doesn't support aliases properly so I get errors like |
@kmalakoff I also have the same issue. I thought I would get something working from your code, but it did not work. I would like to use react-native-elements. I'm running all internet for this. https://spectrum.chat/thread/e055ef10-ea2f-4de6-8041-b4a2ca2f5e39 Error in react-native
Module not found: Error: Can't resolve '../Components/AccessibilityInfo/AccessibilityInfo' in '/Volumes/HSierraDados/Dev-2018/PWA/node_modules/react-native/Libraries/react-native'
ModuleNotFoundError: Module not found: Error: Can't resolve '../Components/AccessibilityInfo/AccessibilityInfo' in '/Volumes/HSierraDados/Dev-2018/PWA/node_modules/react-native/Libraries/react-native'
at factoryCallback (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/next/node_modules/webpack/lib/Compilation.js:276:40)
at factory (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:235:20)
at resolver (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
at asyncLib.parallel (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
at /Volumes/HSierraDados/Dev-2018/PWA/node_modules/async/dist/async.js:3874:9
at /Volumes/HSierraDados/Dev-2018/PWA/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/async/dist/async.js:1048:13)
at /Volumes/HSierraDados/Dev-2018/PWA/node_modules/async/dist/async.js:958:16
at /Volumes/HSierraDados/Dev-2018/PWA/node_modules/async/dist/async.js:3871:13
at resolvers.normal.resolve (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:119:22)
at onError (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
at loggingCallbackWrapper (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Volumes/HSierraDados/Dev-2018/PWA/node_modules/tapable/lib/Tapable.js:252:11) |
@MichelDiz Thank you for chasing this up. I ended up giving up on Next.js because of this (I probably spent over 10 hours trying), but would be happy to go back if someone can get it to work! |
Any progress on this issue? |
@jameskennethrobinson you may need to elaborate or open a new issue. There is already an example of using Next.js and RNW together. |
@dcalhoun Apologies for the lack of specificity. I meant to tag @MichelDiz regarding his attempt to use react-native-elements in conjunction with the official example of Next.js + RNW. |
I have Next 8 and RNW working, while using Yarn workspaces - configuration detailed here: martpie/next-transpile-modules#8 (comment) |
In Next@9 the styles only seem to be rendered client side, when following the official example. Am I overlooking something, or has the setup changed? |
@MrLoh the last time I encountered that, it ended up being a singleton issue in Next. That issue was resolved, but if you are encountering a similar issue, I’d recommend opening a new issue with a test case so the Next team can easily reproduce the issue and help find a fix. |
It seems like it was a gost issue. Disappeared after reinstalling node_modules |
@dcalhoun Now the problem reappeared, without any apparent reason. I have no idea how to reproduce it in a fresh project. Super strange. Do you have a hint how to figure out wether it could still be the same issue. Are you available for freelance work? |
@MrLoh no, I am not available for freelance at this time, sorry. My recommendation would be to see if you can reproduce the issue on various major releases of Next (e.g. I will also add that if you are attempting to transpile the ES module (rather than the already transpiled CJS) exports of RNW (which are the default), then there is an active bug for that. It may/may not result in missing styles. |
There seems to be an official example for react-native-web + next.js here now: https://github.com/zeit/next.js/tree/master/examples/with-react-native-web |
I built a package for making this as simple as possible https://docs.expo.io/versions/latest/guides/using-nextjs/
Hope this helps! |
Hi all, i configured Next for use react-native-web. I also implemented, successful, a web storybook, using react-native-web and react-native-elements .(https://react-native-elements.github.io/react-native-elements/) For doing that, i modified the storybook webpack adding this rules :
i trying to use the same approach for configure the react-native-elements, but i'm stuck on this error, and i don't understand why via Next don't works as expected. here the error i got :
Any help are welcome. |
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Hello,
I'm gonna be starting a new project soon which requires android, iOS and web apps. I'm thinking of using React Native Web to create cross platform and reusable components. However, RNW won't work with Next because of how it renders. I wonder if this feature will be supported anytime soon?
The text was updated successfully, but these errors were encountered: