5

So I've gone through a few variations of configs now and for some reason certain webpack code is not being transpiled to es5 with the babel-loader in production || development (specifying because I know webpack-dev-server removed support for it)

my .babelrc looks like this:

{
  "plugins": ["transform-object-assign", "transform-async-to-generator", "transform-object-rest-spread", "transform-class-properties"],
  "presets": [
    ["env", {
      "targets": { "browsers": ["chrome >= 49", "firefox >= 54", "ie >= 9"] }
    }],
    "react"
  ]
}

I have removed es2015 and switched to presets -> env as suggested by the docs, but it did not work with that in there as well.

my webpack config looks like this:

  module: {
    rules: [{
      enforce: 'pre',
      test:    /\.(js|less|css)$/,
      exclude: [/node_modules/, /bower_components/],
      loader:  StringReplacePlugin.replace({ replacements })
    }, {
      test: /\.(html|svg)$/,
      use:  'raw-loader'
    }, {
      test:    /\.js$/,
      exclude: [/node_modules/, /bower_components/],
      use:     {
        loader: 'babel-loader'
      }
    },

For a working broken example you can load https://www.useloom.com/share/7d602553ce22425c882e96eb58ff7417

in any internet explorer browser and you will notice you get: Const must be initialized from this code: for (const key of Object.keys(ansiStyles)) { which is located in this module:

"use strict";
/* WEBPACK VAR INJECTION */(function(process) {
const escapeStringRegexp = __webpack_require__(1618);
const ansiStyles = __webpack_require__(1619);
const supportsColor = __webpack_require__(1193);

Has anyone run into this before? Is something wrong with the babel config, or is it somehow webpack related?

Here is relevant package.json (there's some extra modules in there as I'm messing with things)

"babel-cli": "^6.18.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-watch": "^2.0.7",
"babelify": "^7.3.0",
"webpack": "^3.9.1",
"webpack-dev-server": "2.7.1"
Paulius Dragunas
  • 1,702
  • 3
  • 19
  • 29
  • 1
    I don't think that is the right video lol cute dog! – Robbie Milejczak Feb 19 '18 at 21:19
  • is this: `for (const key of Object.keys(ansiStyles))` code that you wrote, or code that babel wrote? – Robbie Milejczak Feb 19 '18 at 21:23
  • @RobbieMilejczak this looks like it's coming from webpack it's inside the module that starts with `/* WEBPACK VAR INJECTION */(function(process) {` – Paulius Dragunas Feb 19 '18 at 21:31
  • does your code reference `Object.keys(ansiStyles)` at all? It's pretty weird that babel would compile to an illegal operation, but if that is the case you might want to open an issue on github https://github.com/babel/babel – Robbie Milejczak Feb 19 '18 at 21:32
  • and the video isn't to show the issue, it's to be loaded in internet explorer so you can see the issue, here is a video of the actual issue: https://www.useloom.com/share/2907da86071b4a7cbb92f7fa9f9d88fa – Paulius Dragunas Feb 19 '18 at 21:33

0 Answers0