Haul: Make sure we work with Babel 7

[thymikee]

RN recently merged Babel 7 into master, which means v0.56 will probably get this – @grabbou correct me if I'm wrong.
Would be good to make sure we support that (probably some documentation changes and installing [email protected] will do).

[Krizzu]

So that means react-native preset is already upgraded? If so, we could try to use B7 now

[thymikee]

Yep:
https://github.com/facebook/react-native/commit/6de4ff36b0c5065e9fec9dac6998984552a7418e
https://github.com/facebook/react-native/commit/34bd776af2f2529009188fced91083203a48fd40

[hedgepigdaniel]

Not sure exactly where I've ended up, but I tried to upgrade a project to babel 7 and ended up with this error:

./app/index.android.js
Module build failed: Error: Unknown substitution APP_REGISTRATION given
   at app/node_modules/@babel/template/lib/populate.js:32:15
   at Array.forEach (<anonymous>)
   at populatePlaceholders (app/node_modules/@babel/template/lib/populate.js:30:31)
   at app/node_modules/@babel/template/lib/string.js:22:51
   at app/node_modules/@babel/template/lib/builder.js:85:14
   at programPath.node.body.push.createHmrLogic.map.partial (app/node_modules/haul/src/hot/babelPlugin.js:211:9)
   at Array.map (<anonymous>)
   at applyHmrTweaks (app/node_modules/haul/src/hot/babelPlugin.js:210:35)
   at PluginPass.ImportDeclaration (app/node_modules/haul/src/hot/babelPlugin.js:235:11)
   at newFn (app/node_modules/@babel/traverse/lib/visitors.js:243:21)
   =============
   at codeSnippets.map.snippet (app/node_modules/haul/src/hot/babelPlugin.js:45:38)
   at Array.map (<anonymous>)
   at createHmrLogic (app/node_modules/haul/src/hot/babelPlugin.js:45:23)
   at applyHmrTweaks (app/node_modules/haul/src/hot/babelPlugin.js:210:10)
   at PluginPass.ImportDeclaration (app/node_modules/haul/src/hot/babelPlugin.js:235:11)
   at newFn (app/node_modules/@babel/traverse/lib/visitors.js:243:21)
   at NodePath._call (app/node_modules/@babel/traverse/lib/path/context.js:65:18)
   at NodePath.call (app/node_modules/@babel/traverse/lib/path/context.js:40:17)
@ multi ./node_modules/haul/src/utils/polyfillEnvironment.js ./app/index.android.js

[thymikee]

Haul does not support Babel 7 yet.

[jshearer]

RN 0.56 RC is out. Does Haul support Babel 7 yet?

[FredyC]

@jshearer You know, bumping often won't make things magically happen ;) Also considering it's still just an RC version, you should be prepared that another tech hasn't really caught up to it yet. Bleeding edge is dangerous and you have to live with consequences of that choice ... or help out instead perhaps?

Out of curiosity, you have switched back to metro? So why are you using Haul in a first place if you don't need any features of Webpack really?

[deepsweet]

RN 0.56 release with Babel 7 has just landed.

I've tried to fork Haul to use Babel 7, changed all the dependencies, tweaked everything in src/babelRegister.js and src/cli.js but fall into a rabbit hole of red screens, step by step. It's hard to do that without knowing all the internals and workarounds.

Dear collaborators, sorry for pinging again with this issue, but is there any estimations on integrating Babel 7 to Haul? I'd help.

[thymikee]

@deepsweet thanks for your help! Plugins used in Webpack config (especially babel-loader) also need to be updated and we probably need to add a peerDependency on babel-core ^6.0.0 || 7.0.0-0. Can you try that?

[tkow]

@thymikee I have same issue and tried adding a peerDependency babel-core ^6.0.0 || 7.0.0-0
to package.json at node_modules/haul and npm install --no-dev at node_modules/haul, then react-native run-ios with starting haul but it doesn't work and error says:

./node_modules/haul/src/vendor/polyfills/Number.es6.js                                                                                                                                                                                                                                                                        
Module build failed (from ./node_modules/haul/node_modules/babel-loader/lib/index.js):     

and may be related to bridge older version release note says.

In addition, haul's stdout.log says:

Error: Plugin 0 specified in "{$project}/node_modules/babel-preset-react-native/index.js" provided an invalid property of "default" (While processing preset: "{$project}/node_modules/babel-preset-react-native/index.js")
    at Plugin.init ({$project}/node_modules/haul/node_modules/babel-core/lib/transformation/plugin.js:131:13)
    at Function.normalisePlugin ({$project}/node_modules/haul/node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
    at {$project}/node_modules/haul/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins ({$project}/node_modules/haul/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions ({$project}/node_modules/haul/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at {$project}/node_modules/haul/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at {$project}/node_modules/haul/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets ({$project}/node_modules/haul/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)

this errors may be related to however modules are imported though I don't find conclusion.
I saw these discussions as clues

• :https://github.com/zeit/next.js/issues/4227

• https://github.com/zeit/next.js/issues/4291

• https://github.com/facebook/metro/blob/master/packages/metro-react-native-babel-preset/plugins.js

• https://github.com/gaearon/babel-plugin-react-transform/issues/110

• https://github.com/react-community/react-native-maps/issues/1970

• https://github.com/facebook/react-native/commit/6de4ff36b0c5065e9fec9dac6998984552a7418e

• https://new.babeljs.io/docs/en/next/v7-migration.html#versioning-dependencies-blog-2017-12-27-nearing-the-70-releasehtml-peer-dependencies-integrations

especially, https://github.com/facebook/react-native/commit/6de4ff36b0c5065e9fec9dac6998984552a7418e
says RN changes, I wonder if metro-babel7-plugin-react-transform have side effects though I don't have confidence.

and our error may happen by difference of exports.default and module.exports https://github.com/react-community/react-native-maps/issues/1970

We really want to fix this because we use typescript.
If we can webpack-loader loosely-coupled and like addon plugins.
Do Anyone have idea to fix this?

[ErrorPro]

Just “babel-preset-react-native”: “4.0.0", made it work for me. Do it inside your project.

npm i [email protected]

[tkow]

@ErrorPro

About https://github.com/facebook/react-native/releases/tag/v0.56.0,

When upgrading to 0.56, make sure to bump your babel-preset-react-native package.json dependency to ^5.0.1 or newer.

Does “babel-preset-react-native”: “4.0.0" work with RN 0.56?

I tried version 5.0.1 before but it didn't. I'll try again with 4.0.0.

[ErrorPro]

@tkow I created a new RN project using react-native init and then just downgraded babel-preset-react-native plugin and it worked for me. Please notice: I use haul only to build release bundle, for development I still use metro.

[tkow]

@ErrorPro We understood the point about capacity of the version compatibility of old babel preset
because babel 7 core has backward compatibility about old preset (If it doesn't, we can bridge), but I wonder if downgrade babel-preset may have risk about lack of RN bridge or other core codes. Anyway, Thank you for comments.
We decided older version until solution are found by anyone, or I'll survey and try to fix if I can.

[tkow]

I found that this problem derived from babel-preset-react-native version, now renamed metro-react-native-babel-preset. I rewrote babel-preset react-native to module:metro-react-native-babel-preset with installing the latest in my .babelrc and use babel-loader for babel 7, then it failed resolving NativeModules though any other modules looks no error. There may be problem of metro-react-native-babel-preset.

[grabbou]

We are about to update to that preset in default React Native app anyway as
of 0.57.0-rc.0. This is something to keep track of once it gets released.

On Fri, 17 Aug 2018 at 07:27 tkow [e-mail] wrote:

I found that this problem derived from babel-preset-react-native version,
now renamed metro-react-native-babel-preset. I rewrote babel-preset
react-native to module:metro-react-native-babel-preset@latest in my
.babelrc and use babel-loader for babel 7, then it failed resolving
NativeModules though any other modules looks no error. There may be problem
of metro-react-native-babel-preset.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/callstack/haul/issues/411#issuecomment-413761429, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ACWcxoxnlS1IHsQ-faJbn8jW502w16Ioks5uRlRHgaJpZM4TfAPA
.

[tkow]

I ran

npx babel-upgrade --write

~and can use [email protected] with haul1.0.0-rc.7. so we can use old babel-preset with babel-core7 bridge anyway though it seems obvious~, anyway I wait future news.

In Addition: I have old babel cache so we cannot repro build success.

[hedgepigdaniel]

I've managed to get a project working with Haul + React Native 0.57 + Babel 7 stable. Here's the current progress: https://github.com/callstack/haul/pull/477

[thymikee]

closed via https://github.com/callstack/haul/pull/477