Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hot reloading does not work with @babel/plugin-transform-modules-commonjs

See original GitHub issue

When I use the @babel/plugin-transform-modules-commonjs plugin and change the repo to use an object export for App, hot reloading breaks with the following error:

[HMR] Cannot apply update. Need to do a full reload!
VM1440 react_devtools_backend.js:6 [HMR] Error: Aborted because ./src/App.jsx is not accepted
Update propagation: ./src/App.jsx -> ./src/index.js -> 1
    at hotApplyInternal (http://localhost:8080/main.js:537:30)
    at hotApplyInternal (http://localhost:8080/main.js:770:20)
    at hotApply (http://localhost:8080/main.js:391:19)
    at http://localhost:8080/main.js:366:22

I’ve developed a minimum repro here: https://github.com/michaelgmiller1/react-refresh-webpack-plugin/tree/transform-repro

After patching, you can run the webpack-dev-server example and modify the App.jsx file to reproduce.

Let me know if you need any more info!

Thanks! Mike

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:11 (6 by maintainers)

Top GitHub Comments

1reaction

pmmmwhcommented, Jul 12, 2020

RE-FIXED in 0.4.0-beta.8.

1reaction

michaelgmiller1commented, Jun 24, 2020

anything I can do to help investigate this? super excited to adopt react refresh in our app!

Top Results From Across the Web

How to fix a Babel/runtime/helper issue in Webpack 5?

Try rm -rf node_modules and npm install . Then resolve error one by one. There seems to be a problem with babel configuration....

AngularJS: Hot-Module-Replacement with babel-plugin

The plugin is based on the ng-hot-reload webpack loader but is rewritten as babel plugin so that it is compatible with es-module syntax...

webpack/webpack - Gitter

When i use babel-plugin-transform-async-to-generator , it works. ... to do hot reloading in my own webserver and I'm running into issues with typings....

@lohek/babel-plugin-react-css-modules - npm package | Snyk

Transforms styleName to className using compile time CSS module resolution. ... babel-plugin-react-css-modules solves the developer experience problem ...

Babel Plugin: React CSS Modules - npm

hot syntax. The default value is false - this plugin does not inject HMR accept code. transform. function transform ...