React-hot-loader: The published tagCommonExports.js is incorrectly optimized in 3.0.0-beta.7

Created on 4 Oct 2017 · 5Comments · Source: gaearon/react-hot-loader

This was a head-scratcher. I had react-hot-loader working in a build, and a yarn upgrade stopped it. After diagnosing a variety of issues, I found that the react-hot-loader/webpack loader was using module.exports to find module exports and register them. It needed to be looking at __webpack_exports__.

I'm skipping the usual issue reporting because you can repro this by just pulling the tarball published for 3.0.0-beta.7 here: https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-3.0.0-beta.7.tgz

If you open it up, you'll see this is what lib/webpack/tagCommonJSExports.js looks like:

'use strict';

/* global __FILENAME__ */

;(function register() {
  // eslint-disable-line no-extra-semi
  /* react-hot-loader/webpack */
  if (process.env.NODE_ENV !== 'production') {
    if (typeof __REACT_HOT_LOADER__ === 'undefined') {
      return;
    }

    if (typeof module.exports === 'function') {
      __REACT_HOT_LOADER__.register(module.exports, 'module.exports', __FILENAME__);
      return;
    }
// ...

But here's what the source looks like:

/* global __FILENAME__ */

;(function register() {
  // eslint-disable-line no-extra-semi
  /* react-hot-loader/webpack */
  if (process.env.NODE_ENV !== 'production') {
    if (typeof __REACT_HOT_LOADER__ === 'undefined') {
      return
    }

    /* eslint-disable camelcase, no-undef */
    const webpackExports =
      typeof __webpack_exports__ !== 'undefined'
        ? __webpack_exports__
        : module.exports
    /* eslint-enable camelcase, no-undef */

    if (typeof webpackExports === 'function') {
      __REACT_HOT_LOADER__.register(
        webpackExports,
        'module.exports',
        __FILENAME__,
      )
      return
    }

See the difference? webpackExports was optimized out in an erroneous build. I can't reproduce it on my machine because when I run yarn build, I get this:

'use strict';

/* global __FILENAME__ */

;(function register() {
  // eslint-disable-line no-extra-semi
  /* react-hot-loader/webpack */
  if (process.env.NODE_ENV !== 'production') {
    if (typeof __REACT_HOT_LOADER__ === 'undefined') {
      return;
    }

    /* eslint-disable camelcase, no-undef */
    var webpackExports = typeof __webpack_exports__ !== 'undefined' ? __webpack_exports__ : module.exports;
    /* eslint-enable camelcase, no-undef */

    if (typeof webpackExports === 'function') {
      __REACT_HOT_LOADER__.register(webpackExports, 'module.exports', __FILENAME__);
      return;
    }
// ...

Solution:

Rebuild the package and publish a version bump. Something happened with the last published build to cause it to optimize out the webpackExports variable.

Source

AaronFriel

All 5 comments

@AaronFriel thank you! Great find! I think I will work on a v4 soon because 3.0 is very confusing, beta for more than a year now 🤔. I will pay a special attention to what you found.