search

gaearon / react-hot-loader

Tweak React components in real time. (Deprecated: use Fast Refresh instead.)
http://gaearon.github.io/react-hot-loader/
MIT License
12.26k stars 801 forks source link

Including react-hot-loader/patch makes first variable not defined #834

Closed inspiraller closed 6 years ago

inspiraller commented 6 years ago

Description

index.js

import 'react-hot-loader/patch';
const myVariable = 'something';
console.log(myVariable);

Expected: something

Actual: index.js:2 Uncaught ReferenceError: myVariable is not defined

This applies to both react-hot-loader": "3.1.3", and ^4.0.0-beta.18

theKashey commented 6 years ago

This is babel. Could you also provide its configuration?

gregberge commented 6 years ago

This should not be relative to RHL.

inspiraller commented 6 years ago

My babel.rc file:

{
  "presets" : ["es2015", "stage-0", "react"],
  "plugins": [
    "add-module-exports",
    "transform-es2015-modules-umd",
    "react-hot-loader/babel",
    "transform-do-expressions",
    "transform-object-rest-spread"
  ]
}

My package,json looks like this:

{
  "name": "example",
  "version": "1.0.0",
  "description": "A vanilla setup",
  "private": true,
  "author": "Steve Tomlin",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^7.2.5",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.1.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-do-expressions": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "case-sensitive-paths-webpack-plugin": "^2.1.1",
    "chunk-manifest-webpack-plugin": "^1.1.2",
    "copy-webpack-plugin": "^4.3.1",
    "css-loader": "^0.28.9",
    "dotenv": "^5.0.0",
    "draft-js": "^0.10.5",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.0",
    "enzyme-matchers": "^4.1.1",
    "eslint": "^4.16.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-react": "^7.6.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "history": "^4.7.2",
    "html-webpack-plugin": "^2.30.1",
    "isomorphic-fetch": "^2.2.1",
    "jest": "^22.1.4",
    "jest-enzyme": "^4.1.1",
    "jest-enzyme-matchers": "^1.0.0",
    "jest-sonar-reporter": "^1.3.0",
    "json-server": "^0.12.1",
    "lodash": "^4.17.4",
    "moment": "^2.20.1",
    "node-sass": "^4.7.2",
    "normalizr": "^3.2.4",
    "object-assign": "^4.1.1",
    "open": "^0.0.5",
    "postcss-loader": "^2.0.10",
    "promise": "^8.1.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.2.0",
    "react-hot-loader": "^3.1.3",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "react-test-renderer": "^16.2.0",
    "react-transition-group": "^1.2.1",
    "redux": "^3.7.2",
    "redux-actions": "^2.2.1",
    "redux-devtools": "^3.4.1",
    "redux-devtools-dock-monitor": "^1.1.3",
    "redux-devtools-log-monitor": "^1.4.0",
    "redux-mock-store": "^1.5.1",
    "redux-testkit": "^1.0.6",
    "redux-thunk": "^2.2.0",
    "redux-xhr-middleware": "^0.7.3",
    "require": "^2.4.20",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "^18.0.0",
    "stylelint-scss": "^2.2.0",
    "stylelint-webpack-plugin": "^0.10.1",
    "svgo": "^1.0.4",
    "universal-cookie": "^2.1.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-chunk-hash": "^0.5.0",
    "webpack-dev-server": "^2.11.1"
  },
  "scripts": {
    "dev": "webpack-dev-server --config ./webpack.config.dev.js --inline",
  }
}
theKashey commented 6 years ago

How your code look like after Babel transform - that is the question.

inspiraller commented 6 years ago

This is the generated output:

using UglifyJsPlugin.

webpackJsonp([0],{153:function(n,t,e){var o,i,s;!function(c,r){i=[e(154)],o=r,void 0!==(s="function"==typeof o?o.apply(t,i):o)&&(n.exports=s)}(0,function(){"use strict";console.log("something")});!function(){"undefined"!=typeof __REACT_HOT_LOADER__&&__REACT_HOT_LOADER__.register(myVariable,"myVariable","c:/myapp/src/index.js")}()},154:function(n,t,e){n.exports=e(155)},155:function(n,t,e){"use strict";n.exports=e(156)},156:function(n,t,e){"use strict"}},[153]);

Without uglify:


webpackJsonp([0],{

/***/ 153:
/***/ (function(module, exports, __webpack_require__) {

var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (global, factory) {
  if (true) {
    !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(154)], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
                __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
                (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
                __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
  } else if (typeof exports !== "undefined") {
    factory(require('react-hot-loader/patch'));
  } else {
    var mod = {
      exports: {}
    };
    factory(global.patch);
    global.index = mod.exports;
  }
})(this, function () {
  'use strict';

  var myVariable = 'something';
  console.log(myVariable);
});

;

var _temp = function () {
  if (typeof __REACT_HOT_LOADER__ === 'undefined') {
    return;
  }

  __REACT_HOT_LOADER__.register(myVariable, 'myVariable', 'c:/myapp/src/index.js');
}();

;

/***/ }),

/***/ 154:
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(155)

/***/ }),

/***/ 155:
/***/ (function(module, exports, __webpack_require__) {

"use strict";

/* eslint-disable global-require */

if (true) {
  module.exports = __webpack_require__(156);
} else {
  module.exports = require('./patch.dev');
}

/***/ }),

/***/ 156:
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/* noop */

/***/ })

},[153]);
//# sourceMappingURL=app.57d88755b5abecdf79ae.js.map
theKashey commented 6 years ago

Ok. Now I see the problem. transform-es2015-modules-umd - that is the problem. I am not sure that we should handle this, but we could.

gregberge commented 6 years ago

Good catch, no we would not, it is an edge case.

theKashey commented 6 years ago

@inspiraller

inspiraller commented 6 years ago

@theKashey - thanks. I submitted this also to babel. They have provided a solution which resolves transform-es2015-modules-umd as you have said, but allows me to keep react-hot-loader/patch in index.js https://github.com/babel/babel/issues/7325

This works. thank you for all your help.