New JSX transform

[LunatiqueCoder]

• Enables the new JSX Transform from React.
• Removes all React imports.
• Improves react-native-web setup

[LunatiqueCoder]

I suppose in babel.config.js it means it will work on native as well, in craco.config.js it would only work for web ? Just a learning question for me

I think the babel.config.js will only work for native (Metro bundler), while with craco.config.js you have a different babel config for the web. The reason for that is because we're using create-react-app (by using react-scripts) and it ships with webpack bundler and babel preconfigured and it prevents you from overriding them, that's where CRACO comes in.

For React Native we have module:metro-react-native-babel-preset while for the web we have @babel/preset-react.

Don't take my words for granted, I'm still learning those things just like you.

[LunatiqueCoder]

I also think the setup for react-native-web is not ready, according to their docs: https://necolas.github.io/react-native-web/docs/setup/

So I'll probably delay the release until I investigate it further.

[LunatiqueCoder]

Ok, so according to https://necolas.github.io/react-native-web/docs/installation/#create-react-app, everything should be set, because we are using create-react-app.

I also updated my previous comment with explanations.

I'd love if you would have a final word here: https://github.com/plaut-ro/luna/pull/26/files/a564f96cffd7ea1d1578a4db62e90a212a1e5cc8#diff-18d8f5f6258b95d1c6c734cb1e10393cadbc55824246f748b8fe8645b5faaadd

[mikehardy]

Ok, so continuing the "if I understand correctly..." trend of questions - If I understand correctly then, we need react-native-web and react-native to both have it configured somehow/anyhow

1- template/babel.config.js - handles the react-native config, has no effect on web 2a- create-react-app handling it already or 2b CRACO+craco.config.js with babel config override handling it directly or 2c react-native-web babel preset does it for web

I checked 2a, 2b and 2c and at least for me, I cannot see where on the web side that particular thing is being turned on. I'm sure it is! But in looking at those repos I just couldn't find it.

Do you have a link to where one of them is bringing it, like..could be here https://github.com/necolas/react-native-web/blob/081a128db325f9ee10c359e304e9f6cc7f4f9c56/scripts/babel/preset.js#L30 - but it's not ? I'm sure it's obvious somewhere and I just missed it

[LunatiqueCoder]

Maybe here? https://github.com/facebook/create-react-app/blob/f85b06493c5169483ec3227036d7d2576c0e259c/packages/react-scripts/config/webpack.config.js#L301

[mikehardy]

but...that's just an alias ? :-) - Honestly I don't know. I mean, if it's tested and working, awesome - that means it's a failure (on my part) to understand completely yet but it must be hooked somewhere...

[LunatiqueCoder]

Thanks to your questions I made some nice discoveries, I'll have to investigate it a little bit further and come back to you and share. Unfortunately I'm a bit busy with other projects, but I'll be back ASAP.

Should I reach here for help maybe? https://github.com/necolas/react-native-web/discussions

Thanks, Mike, you're so helping me! I really appreciate it.

[mikehardy]

open source means never time pressure :-), I'm still super busy producing the work project based on the current version of this template :sweat_smile: Glad the collaboration is helping you - there is enough here for me I'm learning about as fast as I can. That's as much as any nerd can ask for :-). Cheers

[LunatiqueCoder]

Ok, thanks to the first link that you provided, I noticed that I came to a similar babel preset while trying out mobile+web with an advanced example and fixing issues that I had, and then I realised that I was misusing the babel-plugin-react-native-web.

From its README:

A Babel plugin that will alias react-native to react-native-web and exclude any modules not required by your app (keeping bundle size down).

CORRECT:

  "plugins": [
     // https://necolas.github.io/react-native-web/docs/setup/#package-optimization
    ["react-native-web"]
  ]

INCORRECT:

  "plugins": [
    ["plugin-babel-react-native-web"]
  ]

Another obvious mistake that I made was the babel preset:

CORRECT:

    presets: [
       // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      'module:metro-react-native-babel-preset
    ],

I also came across this: https://github.com/necolas/react-native-web/blob/081a128db325f9ee10c359e304e9f6cc7f4f9c56/packages/babel-plugin-react-native-web/src/index.js#L38

I'll be honest with you, this is a bit overwhelming for me, but also exciting, I can only keep investigating and see what else I can find out.

[mikehardy]

Yeah I was in the same area today with this https://clintgoodman27.medium.com/3-tips-for-web-compatibility-with-react-native-ed1fc45f3597 plus adding a drawer navigator (which brought in reanimated) - adding some webpack aliases to shim files for react-native-firebase actually worked! I have a firebase app now working with @react-native-firebase/xyz imports on ios/android/web via the rewrite

I'm still using the first version of the template so haven't converted to CRACO yet but the power to shim things in and rewrite things is clearly all there and working, even if neither of us is fully understanding it yet. That will come

One thing I noticed in my testing is that react-native-web definitely already has the jsx transform - it does not need a React import, but react-native does. So simply including that as an extra in the babel.config.js (used by native only?) should be sufficient. Not sure exactly which preset or plugin is pulling in the experimental jsx transform but it is in there, verified by testing

[mikehardy]

Oh - whenever I have the firebase stuff understood and cleaned up I'll push an update here https://github.com/invertase/react-native-firebase-authentication-example so you'll be able to see it, I'll probably re-do that whole example off this template and then add the required webpack aliases + shims, and then drop the code in again and it should....all work :-)

[LunatiqueCoder]

One thing I noticed in my testing is that react-native-web definitely already has the jsx transform - it does not need a React import, but react-native does. So simply including that as an extra in the babel.config.js (used by native only?) should be sufficient. Not sure exactly which preset or plugin is pulling in the experimental jsx transform but it is in there, verified by testing

I think react-scripts it's also pulling it for web: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#create-react-app , and indeed it's enabled by default when you use npx create-react-app my-app

I also noticed that it comes with 'experimental' in its name only for React Native and is not enabled by default when you use npx react-native init. I also have to investigate this, I haven't found anything yet about it.

Oh - whenever I have the firebase stuff understood and cleaned up I'll push an update here https://github.com/invertase/react-native-firebase-authentication-example so you'll be able to see it, I'll probably re-do that whole example off this template and then add the required webpack aliases + shims, and then drop the code in again and it should....all work :-)

Sounds very interesting, I'm also watching that repository 👌

I guess I'll just merge those changes for now. If you find anything else, please let me know. I'll continuously try to improve the template and try to understand better. 🚀