Replies: 9 comments 28 replies
-
I'm sending this in my React newsletter right now ;)
I don't understand what you mean here. Why would you want Remix to read/understand the IMHO Remix should rather support/resolve
I don't understand that either 😅 |
Beta Was this translation helpful? Give feedback.
-
This is functionally the same as what I said about
I don't. The
|
Beta Was this translation helpful? Give feedback.
-
@nandorojo, I am interested in this as well. I am very much a believer in one stack, many platforms. I absolutely love Expo for mobile application development, but need more for web application development - a database, api, caching, metatags, server side rendering. After reading through the Remix.run tutorials, I am excited for the potential of using Remix and Expo together. My weekend project was to figure out that integration - remix-expo demonstrates basic monorepo integration of Remix and Expo. Primary Challenge: Module Aliasing The main challenge in getting Remix and Expo to play nicely is module aliasing - specifically aliasing react-native and react-native-web. Unfortunately, the speed and performance of Remix is in large part due to the simplicity of it's esbuild pipeline, but without Babel or Webpack the only options for module aliasing is through tsconfig paths. Further, Remix itself limits how your can import and bundle modules (presumably to help control bundle size and speed). Solution: PNPM The solution is to use PNPM package manager. PNPM allows you to alias modules at the package level, negating the need for other react-native methods of aliasing. As discovered and documented this in react-native-web-remix-setup. Thanks Horus Lugo! Then it's just a matter of getting Expo to work with Monorepos. As Cedric van Putten, the Expo Monorepo expert detailed here, "That's not an issue related to pnpm, or Expo. It's just how Metro explains it can't find packages. I got it working with the In regards to the react-native-web alias, I have found it is actually easier to write components using the react-native-web components and module aliasing back to react-native in expo using a babel alias. It is far harder to alias in remix than in expo. Hopefully, someone at Remix figures out a elegant way to allow for module aliasing. Other Considerations: There are a bunch of other things to figure out to make this a production ready stack.
Anyway, it's early days, but this is all very promising. If anyone wants to collaborate on this, hit me up on twitter, @tyrauber. Special thanks to @HorusGoul and @byCedric for the heavy lifting. |
Beta Was this translation helpful? Give feedback.
-
@tyrauber Thank you for this creation! And that comment summarizes what I think is the next trend in the path for react-native to become truly universal, which is react-native as first-class citizen on web. I'm experimenting with a similar boilerplate idea, but using nx instead of turborepo. I'd like to mention another potential ssr framework with good support for react-native-web is Razzle. They even have a ssr template for rnw with razzle in their repo. Razzle seems very similar to remix in some ways, and perhaps even more bare-bones which might be a good thing. |
Beta Was this translation helpful? Give feedback.
-
Just for reference, I haven't tested it out yet, but it seems you can use remix with capacitor for an all-platform development approach. Seems promising to me. |
Beta Was this translation helpful? Give feedback.
-
@nandorojo have you had any thoughts/updates on this since you first made the post? I've been working with Solito/Next/Expo (incredible work, btw)... but it would be amazing to replace Next.js with Remix. Honestly, I'm surprised more work isn't going into this approach. I think what you've done with Solito is the future of development, but sometimes it feels like you're the only one working on the problem! @tyrauber it looks like you've done some great work. I see the repo hasn't been updated in 5 months. Did you run out of time to work on it, or did you run into some hard problems? |
Beta Was this translation helpful? Give feedback.
-
Update (5 Oct 22): The hydration errors mentioned in the first two sections of this post have been resolved. The third section ("On the presumption that these hydration problems can be resolved...") is now the most relevant to the overall discussion. I've been digging into this for the last few days, focusing on just getting react-native-web (RNW) and compatible libraries working in Remix (i.e. avoiding any monorepo/routing/solito-ish aspects for the time being). I’m finding that with current versions of remix (1.7.2), react (18.2.0), and react-native-web (0.18.9), even the simplest possible use of RNW (adding a single RNW
Open in CodeSandbox (source code) This has similar symptoms to #2947 (sans crash), but it occurs even in incognito mode when there are no active browser extensions. From there, I tried following the process outlined in @HorusGoul’s blog post (mentioned above by @tyrauber) for integrating RNW into a Remix app, and I ended up encountering a different hydration issue — the same one that @HorusGoul reported at necolas/react-native-web#2326. From what I can tell, that issue was incorrectly closed based on a misreading of @HorusGoul's example code. The hydration error:
Open in CodeSandbox (source code) If you open the CodeSandbox or clone/run the code locally, the root page loads with the client and server styles markup displayed side-by-side. The client-generated styles are fairly different from the server-generated ones, e.g: Client styles:
Server styles:
@tyrauber I also tried your code from remix-expo for this (it is slightly different from @HorusGoul's) and got the same result. (Open in CodeSandbox) (source code) At this point it's unclear to me whether these hydration issues are coming from react-native-web, remix, these specific implementations of stylesheet rendering, or some combination of the three. @tyrauber and @HorusGoul, first off, thank you for sharing your work! And second, can you confirm if you're seeing the same thing in your projects? @HorusGoul, I'd also be curious to know how you came up with the solution you demonstrate in your blog post — is there any documentation or reference code that you based your implementation on? On the presumption that these hydration problems can be resolved, I started experimenting with modding remix’s esbuild configuration to enable support for community RN packages. I focused on two main build configuration changes that are required to enable compatibility with the RN ecosystem:
To those ends, I modded @remix-run/dev to add support for two new config options:
Here’s how the new config options can be used to enable compatibility with react-native: // remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
// ...
resolveExtensions: [".tsx", ".ts", ".jsx", ".js", ".css", ".json"]
.map((ext) => [`.web${ext}`, ext])
.flat(),
resolveAliases: {
"react-native": require.resolve("react-native-web"),
},
} Using my remix mod, I was able to get the arbitrarily-selected Open in CodeSandbox (source code) A glance at @oblador's readme for react-native-esbuild suggests that these additional config options might not be the only changes required to enable full compatibility with some packages in the react-native ecosystem (e.g. it's unclear if additional flow-stripping/custom-main-field-resolving plugins would be needed to support some RN(W) community packages, and, if so, how widespread that need would be). As noted in #2168 and #2437, the remix maintainers are understandably resistant to creating esbuild-specific user-facing APIs. It’s unclear if these two new config options I've added would run afoul of the maintainers' philosophy as the options would be pretty trivial to implement in other bundlers (and would likely be similarly trivial in any yet-to-be-built bundlers), but if the maintainers aren’t comfortable exposing/supporting this level of control for users then another approach still within remix could be to wrap the changes up into a single After all of this, I am now left pondering: how do we start figuring out what's going on with these hydration errors? Do those css discrepancies look familiar to anyone? |
Beta Was this translation helpful? Give feedback.
-
For a newbie on react native or ionic what would you guys suggest as a good repro to learn how remix and react native work? are there any up2date examples that use above discussed innovations? I wanted to tryout writing wn app for an opensource project im on. |
Beta Was this translation helpful? Give feedback.
-
It's too bad this discussion "died". I'm starting a new project that has both native and web apps. This would also give Remix tons of exposure from the RN community considering it would be the only framework (other than NextJS) to support full cross-browser support. But considering there's no engagement from the maintainers I'm probably just ranting to an empty room here 😂 |
Beta Was this translation helpful? Give feedback.
-
I just read the breakdown of Remix vs. Next.js, and wow, am I intrigued.
I've spent the last year/two building bindings between React Native and Next.js so that we can run the same code on both.
I have a number of popular libraries dedicated to this, and I gave a talk about it at Next.js Conf.
Naturally, I'm now wondering if something similar is possible with Remix. I understand Remix leans in heavily to the browser, which is awesome. I wonder if it would be possible to add
.native.tsx
files (even in userland) in order to share screens and components between Native and Remix.Overall, it would be useful to have someone chime in and say if they think this is a possible future worth pursuing or not. It seems like the key differences would be
useLoaderData
,Form
, and navigation. Not sure if I'm missing anything else there.Update see this repo and this comment by @tyrauber.
Beta Was this translation helpful? Give feedback.
All reactions