React-hot-loader: Babel 7 Support

[SamMorrowDrums]

Hi - I don't know if there is a plan to support babel 7, I'm sure it's quite a lot of work but it currently errors when I try it with webpack 4 I get ReferenceError: [BABEL] app/app.js: Unknown option: .visitor..

When using babel-upgrade --write I get the following changes:

     "reload"
   ],
   "devDependencies": {
-    "babel-cli": "^6.7.5",
-    "babel-core": "^6.26.3",
+    "@babel/cli": "7.0.0-beta.54",
+    "@babel/core": "7.0.0-beta.54",
+    "@babel/plugin-external-helpers": "7.0.0-beta.54",
+    "@babel/plugin-proposal-class-properties": "7.0.0-beta.54",
+    "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.54",
+    "@babel/preset-env": "7.0.0-beta.54",
+    "@babel/preset-flow": "7.0.0-beta.54",
+    "@babel/preset-react": "7.0.0-beta.54",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^8.2.3",
     "babel-jest": "^22.4.3",
     "babel-plugin-dynamic-import-node": "^1.2.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.5.0",
     "codecov": "^3.0.1",
     "conventional-github-releaser": "^2.0.2",
     "create-react-class": "^15.6.3",
@@ -81,7 +83,7 @@
     "recompose": "^0.27.0",
     "rimraf": "^2.5.2",
     "rollup": "^0.58.2",
-    "rollup-plugin-babel": "^3.0.4",
+    "rollup-plugin-babel": "^4.0.0-beta.2",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-json": "^2.3.0",
     "rollup-plugin-node-resolve": "^3.3.0",
@@ -93,6 +95,7 @@
     "react": "^15.0.0 || ^16.0.0"
   },
   "dependencies": {
+    "@babel/preset-flow": "7.0.0-beta.54",
     "fast-levenshtein": "^2.0.6",
     "global": "^4.3.0",
     "hoist-non-react-statics": "^2.5.0",

When running npm build I cannot get past the following error (haven't had a lot of time to investigate yet) but certainly, we might need to update a variety of things to properly handle the API changes.

[!] (babel plugin) Error: Cannot find module 'babel-plugin-external-helpers' from '/home/sam/src/github.com/gaearon/react-hot-loader'
- Did you mean "@babel/external-helpers"?
src/index.dev.js
Error: Cannot find module 'babel-plugin-external-helpers' from '/home/sam/src/github.com/gaearon/react-hot-loader'
- Did you mean "@babel/external-helpers"?
    at Function.module.exports [as sync] (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/resolve/lib/sync.js:43:15)
    at resolveStandardizedName (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/config-descriptors.js:114:9)
    at items.map (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/config-descriptors.js:69:50)
    at Array.map (<anonymous>)
    at createDescriptors (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/config-descriptors.js:69:29)
    at createPluginDescriptors (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/config-descriptors.js:65:10)
    at alias (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/config-descriptors.js:57:49)

Would be really great if we could begin moving towards babel 7 support. I don't know what it would entail yet - and if all the deps have a working version for that, but certainly it'll only be more important so let me know what your thoughts are.

[SamMorrowDrums]

I should mention I did try running a find replace for `babel-plugin-external-helpers -> @babel/external-helpers" but it didn't do the trick.

[theKashey]

I've got no plans of migrating to babel 7 while it is in beta.
Meanwhile, all the changes to make __RHL's__ babel plugin be __babel 7 compatible__ were made, and one could already use them in a pair, to provision TypeScript, for example.

For Rect-Hot-Loader customer devDependencies means nothing.

[SamMorrowDrums]

@theKashey Thanks for response. Well when I add the Babel plugin to my webpack 4 build (with Babel 7) I get this error: ReferenceError: [BABEL] app/app.js: Unknown option: .visitor. I understand that the dev-deps don't matter, but my build works until I use this plugin - so something isn't working with Babel 7 as far as I can tell.

It's an experimental branch for me, so I'm not in a rush - but I don't know yet what is causing the bug - as I say, the build works just fine without the presets: ['react-hot-loader/babel'], in the babel loader.

[theKashey]

@SamMorrowDrums - I've checked - babel7 did not changed visitor API. Something is wrong with your configuration.

[SamMorrowDrums]

OK I'll close for now - if I find the issue I'll comment, but it's strange that it's only when this plug-in is active that I get the error - so not sure what part of the config is messing with things.

[theKashey]

Babel 7 rc just got released. Reopening the ticket.

[petermikitsh]

It appears some changes might be needed. I'm using Babel 7 (7.0.0-rc.1) and react hot loading is broken.

[theKashey]

Working on this right now as a part of TS hot-reloading.

[theKashey]

@petermikitsh - I could not spot any issues __using__ react-hot-loader with babel 7. Could you shed some light, and share some errors?

I am using configuration from this PR updated to use rc-1, and everything is ok-ish.

[thcolin]

Got same issue with @babel/core^7.0.0 and webpack^4.17.1

Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: [BABEL] ./src/index.js: Unknown option: .visitor.

[theKashey]

@thcolin - and only with RHL enabled? Have you updated babel loader to match version 7?
You can also use yarn resolutions to force babel-core to point to version 7 bridge, "fixing" all the not yet migrated tools.

I am afraid, but there is nothing we could fix on our side.

[villesau]

This is what we started to get after updating to babel 7, and only after adding RHL to babelrc:

fe-unit-tests_1   | Module build failed: TypeError: Cannot read property 'push' of null

fe-unit-tests_1   |     at PluginPass.ExportDefaultDeclaration (/frontend/node_modules/react-hot-loader/dist/babel.development.js:83:36)

fe-unit-tests_1   |     at newFn (/frontend/node_modules/@babel/traverse/lib/visitors.js:193:21)

fe-unit-tests_1   |     at NodePath._call (/frontend/node_modules/@babel/traverse/lib/path/context.js:53:20)

fe-unit-tests_1   |     at NodePath.call (/frontend/node_modules/@babel/traverse/lib/path/context.js:40:17)

fe-unit-tests_1   |     at NodePath.visit (/frontend/node_modules/@babel/traverse/lib/path/context.js:88:12)

fe-unit-tests_1   |     at TraversalContext.visitQueue (/frontend/node_modules/@babel/traverse/lib/context.js:118:16)

fe-unit-tests_1   |     at TraversalContext.visitSingle (/frontend/node_modules/@babel/traverse/lib/context.js:90:19)

fe-unit-tests_1   |     at TraversalContext.visit (/frontend/node_modules/@babel/traverse/lib/context.js:146:19)

fe-unit-tests_1   |     at Function.traverse.node (/frontend/node_modules/@babel/traverse/lib/index.js:94:17)

fe-unit-tests_1   |     at traverse (/frontend/node_modules/@babel/traverse/lib/index.js:76:12)

[SamMorrowDrums]

As Was the case for me, it only encounters this issue with RHL so I'm not
sure where to start debugging if it's not related to RHL. It seems crazy
that it would only happen with this lib, but that it would simultaneously
be unrelated.

On Wed, 29 Aug 2018, 23:55 Anton Korzunov, [e-mail] wrote:

@thcolin https://github.com/thcolin - and only with RHL enabled? Have
you updated babel loader to match version 7?
You can also use yarn resolutions to force babel-core to point to version
7 bridge, "fixing" all the not yet migrated tools.

I am afraid, but there is nothing we could fix on our side.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/gaearon/react-hot-loader/issues/1043#issuecomment-417133296,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AElqXqKKbbTSKcNS2hsOnx1MF4IqTcXgks5uVxvGgaJpZM4VylFW
.

[theKashey]

Mmmmm. Look like Babel 7 is a bit more immutable, and RHL's attempt to store some variables in the nodes does not work.
Basically

node[REGISTRATIONS] = [];
...
path.parent[REGISTRATIONS].push(buildRegistration({ // no longer works

[loganfsmyth]

Attaching metadata to nodes like that can definitely be dangerous since any plugin could replace any node, and could well do so in a minor version. I haven't looked closely at this codebase to see which plugin change could have been applicable here, though. We'd be happy to give suggestions if you want to chat with folks in Babel's slack, or here if need be.

[theKashey]

@loganfsmyth - good idea. Just dropped a new message on slack.

[theKashey]

This issue is probably fixed in v4.3.7. Probably, as long all my examples worked well all this time, and no one reported their babel configuration to reproduce.

So - could you give a try to a new version?

[thcolin]

I tried 4.3.7 and got same issue, here's my babel config :

{
  "presets": ["@babel/env", "@babel/react", "react-hot-loader/babel"] 
}

with my package.json :

{
  "devDependencies": {
    "@babel/core": "^7.0.1",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.2",
    "html-webpack-plugin": "^3.2.0",
    "react-hot-loader": "^4.3.7",
    "webpack": "^4.18.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  }
}

[villesau]

@theKashey No luck here either:

15:30:38 [Frontend tests] fe-unit-tests_1   | Module build failed: TypeError: Cannot read property 'push' of undefined
15:30:38 [Frontend tests] fe-unit-tests_1   |     at PluginPass.ExportDefaultDeclaration (/frontend/node_modules/react-hot-loader/dist/babel.development.js:83:30)
15:30:38 [Frontend tests] fe-unit-tests_1   |     at newFn (/frontend/node_modules/@babel/traverse/lib/visitors.js:193:21)
15:30:38 [Frontend tests] fe-unit-tests_1   |     at NodePath._call (/frontend/node_modules/@babel/traverse/lib/path/context.js:53:20)
15:30:38 [Frontend tests] fe-unit-tests_1   |     at NodePath.call (/frontend/node_modules/@babel/traverse/lib/path/context.js:40:17)
15:30:38 [Frontend tests] fe-unit-tests_1   |     at NodePath.visit (/frontend/node_modules/@babel/traverse/lib/path/context.js:88:12)
15:30:38 [Frontend tests] fe-unit-tests_1   |     at TraversalContext.visitQueue (/frontend/node_modules/@babel/traverse/lib/context.js:118:16)
15:30:38 [Frontend tests] fe-unit-tests_1   |     at TraversalContext.visitSingle (/frontend/node_modules/@babel/traverse/lib/context.js:90:19)
15:30:38 [Frontend tests] fe-unit-tests_1   |     at TraversalContext.visit (/frontend/node_modules/@babel/traverse/lib/context.js:146:19)
15:30:38 [Frontend tests] fe-unit-tests_1   |     at Function.traverse.node (/frontend/node_modules/@babel/traverse/lib/index.js:94:17)
15:30:38 [Frontend tests] fe-unit-tests_1   |     at traverse (/frontend/node_modules/@babel/traverse/lib/index.js:76:12)

[theKashey]

😿why it does work for me :(
could anybody share a broken example?

[sibelius]

where can we add a failing test?

[theKashey]

gist/another repo/codesandbox? Or you are speaking about real unit test?

[sibelius]

about a real unit test

[theKashey]

We have some tests for babel plugin, not sure they are covering this case.

Meanwhile - could any of you just replace your node_modules/react-hot-loader/dist/babel.development.js by this file
This one _definitely_ 🤞should work, but lets double check it first

[thcolin]

Sorry 😢

[BABEL] src/index.js: Unknown option: .visitor.

Will try to give you a codesandbox later today

[villesau]

@theKashey works for me, thanks! :) Can you shed light on what was the culprit? I'm just curious.

[theKashey]

Example in gist uses nested tree traversal, and the “lost” variable is just a local variable in a function scope.
Not sure how this approach affects performance, but at least it works.

Anyway - still keen to see a broken example, to prevent this sort of issue in the future.

I will double check the last solution and ship an update (in my) tomorrow

[villesau]

@theKashey @loganfsmyth you asked for repro, here is pretty much smallest one I came up with: https://github.com/villesau/react-hot-loader-error

[loganfsmyth]

Perfect, thanks @villesau.

@theKashey Here's the issue. Because of the way babel-plugin-rewire works, it can actually insert an ExportDefaultDeclaration _during_ Program#exit, which means that your delete line will have removed the array by the time you push into it.

This ordering could potentially have caused this in Babel 6 too, so I'm not sure why it wasn't throwing before.

It might be enough to change to

// delete state[REGISTRATIONS]; // eslint-disable-line no-param-reassign
state[REGISTRATIONS] = [];

[theKashey]

So - what's the best way to fix it - don't clear registration or use the other way to structure plugin, as I did in the last PR.

[theKashey]

So - does this issue is not related to Babel 7, but to babel-plugin-rewire?

Why not to use jest, rewiremock, proxyquire, mockery or td instead?

[villesau]

@theKashey In this case, looks like that. Hard to say what caused it as react-hot-loader, babel and babel-plugin-rewire has changed recently. reason might be some of them, or combination.

Why not to use jest, rewiremock, proxyquire, mockery or td instead?

Legacy reasons, we have complicated test suite with 7.5k tests relying on this approach. And it works decently anyways.

[theKashey]

v4.3.8 probably fixes this. If not - then we have #1064, which definitely would solve the problem.

[villesau]

@theKashey latest release fixed my issue, thanks a lot!

[SamMorrowDrums]

@theKashey yep! As OP I am extremely happy to report that I can now use react hot loader with Babel 7. Thanks for the hard work. I'll close this, as I think that other issues can be reported separately, and there is already a PR up for some final work!

[sungwoncho]

I am able to reproduce the error Unknown option: .visitor using react-hot-loader 4.3.11, babel 7.1.0 and webpack 4.19.1 (all latest). Any ideas?

[theKashey]

Just give an example to reproduce. As long I don't have this problem - I could not fix it.

PS: Sometimes wiping yarn/package lock fixes everything.

[SamMorrowDrums]

I was about to say the same basically. If npm

npm cache-clear --force
rm -r node_modules
rm package-lock.json 
npm install

I also set cache to false, then build and then added back cache directory
and it all worked for me.

[againksy]

same here
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-middleware": "^3.4.0",
"webpack-hot-middleware": "^2.24.2",
"react-hot-loader": "^4.3.11",
"babel-loader": "^8.0.0-beta.0",

[martinhorsky]

Everyone who have Unknown option: .visitor error message it is because you put 'react-hot-loader/babel' to presets instead of plugins. Check it.

[deezone]

For a little more clarity, @martinhorsky is pointing to:

• .bablerc

{
  "plugins": ["react-hot-loader/babel"]
}

rather than:

{
  "presets": ["react-hot-loader/babel"]
}

Reference:
https://www.npmjs.com/package/react-hot-loader#getting-started

[JieChang]

Babel.transform(code, {
presets: ['es2015', 'react'],
plugins: [['proposal-decorators', { legacy: true }], ['proposal-class-properties', { loose: true }], 'react-hot-loader/babel']
})