Webpacker: regeneratorRuntime is not defined

[phildionne]

Seems to be similar to https://github.com/rails/webpacker/issues/517

webpacker 2.0.0
node 8.0.0

.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "node": "current",
        "browsers": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }]
  ],

  "plugins": [
    "syntax-dynamic-import",
    ["transform-class-properties", { "spec": true }]
  ]
}

package.json

{
  "name": "dirtylemon-admin",
  "private": true,
  "dependencies": {
    "autoprefixer": "^7.1.1",
    "axios": "^0.16.1",
    "babel-core": "^6.25.0",
    "babel-loader": "7.x",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.2",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "4.0.0-alpha.6",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.6",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "glob": "^7.1.2",
    "immutability-helper": "^2.2.0",
    "jquery": "^3.2.1",
    "js-yaml": "^3.8.4",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "node-sass": "^4.5.3",
    "notie": "^4.3.0",
    "numeral": "^2.0.6",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.6",
    "postcss-smart-import": "^0.7.4",
    "precss": "^1.4.0",
    "rails-erb-loader": "^5.0.2",
    "react": "^15.5.4",
    "react-auto-scroll": "^1.1.0",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.5",
    "redux": "^3.6.0",
    "redux-saga": "^0.15.3",
    "redux-thunk": "^2.2.0",
    "resolve-url-loader": "^2.0.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "tablesort": "^5.0.0",
    "webpack": "^2.6.1",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.4.5"
  }
}

[gauravtiwari]

@phildionne Please try the same solution in #517

[phildionne]

@gauravtiwari I did, see my .babelrc

[gauravtiwari]

Please remove

        "browsers": "> 1%",
        "uglify": true

[gauravtiwari]

and also "useBuiltIns": true

[phildionne]

Should I also yarn remove babel-polyfill ?

[phildionne]

@gauravtiwari now with .babelrc and same error:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "node": "current"
      }
    }]
  ],

  "plugins": [
    "syntax-dynamic-import",
    ["transform-class-properties", { "spec": true }]
  ]
}

[gauravtiwari]

You are not referencing babel-polyfill anywhere right?

[phildionne]

No, not in my own codebase.

[gauravtiwari]

Strange that should work because async/await is natively supported in your node version. Did you restart server after changing?

[phildionne]

Yes. I also just updated webpacker from 1.x to 2.0. I then ran ./bin/rails webpacker:install

[phildionne]

Should I delete the config/webpack folder when upgrading version like this?

[gauravtiwari]

You could do that if you haven't changed anything or follow upgrade instructions in CHANGELOG

[phildionne]

I didn't change any configuration in config/webpack. I followed the upgrade instructions in CHANGELOG and just re-run ./bin/rails webpacker:install with no success. Is there a log I can add that would help understanding the issue?

[gauravtiwari]

And removed these old files? - https://github.com/rails/webpacker/blob/master/CHANGELOG.md#breaking-change

[phildionne]

Yes

[gauravtiwari]

hmm, but this is not related to error you are getting anyway. Could you please double check node version in your current directory? Sorry if you have done that already, I am just trying to debug this together

[gauravtiwari]

You have a globally installed node or using ndenv or something?

[phildionne]

Of course, no problem.

$ which node
/Users/pdionne/.nvm/versions/node/v8.0.0/bin/node

$ node -v 
v8.0.0

$ bin/webpack -v
2.6.1

[gauravtiwari]

So you are using nvm. Could you please check the same in your rails app directory?

[phildionne]

I use nvm

[gauravtiwari]

nvm current

[phildionne]

I'm running all of these commands from the rails project root directory. Should I be somewhere else?

$ nvm current
v8.0.0

[gauravtiwari]

No no, that's good 👍 thank you. So you got the right node version then why doesn't it compile. One more thing - could you please check - config/webpack/loaders/babel.js file?

[phildionne]

config/webpack/loaders/babel.js

module.exports = {
  test: /\.js(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}

[gauravtiwari]

That's looks correct. And you are using .js extension for your pack file name? Also, you have this in loaders/react.js?

module.exports = {
  test: /\.(js|jsx)?(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}

[phildionne]

Yes, the pack is .js.

Here's the loaders/react.js

module.exports = {
  test: /\.(js|jsx)?(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      'react',
      ['env', { modules: false }]
    ]
  }
}

[gauravtiwari]

That's it there we go - please replace this with one I have posted

[gauravtiwari]

This is old webpacker config - if you re-run react installer it will replace this file. Here we are using inline babel options, which are overriding .babelrc settings.

[phildionne]

I'm now unable to build the main file:

ERROR in ./app/javascript/hitl/index.jsx
Module build failed: SyntaxError: Unexpected token (28:2)

  26 |
  27 | render (
> 28 |   <Provider store={store}>
     |   ^
  29 |     <App />
  30 |   </Provider>,
  31 |   document.getElementById('root')

[gauravtiwari]

Ohh you need react preset in your .babelrc

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "node": "current"
        }
      }
    ],
    "react"
  ],

  "plugins": [
    "syntax-dynamic-import",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

[phildionne]

Ok, I re run rails webpacker:install:react and it works. I'll also update .babelrc just in case

[phildionne]

Great! thank you so much!

[f6v]

@gauravtiwari when I remove

"browsers": "> 1%", "uglify": true

and replace with "node": "current" it works fine in development mode but fails to deploy to heroku. Any ideas why?

[f6v]

Here's the output:

[Webpacker] Compiling assets 🎉
[Webpacker] Compilation Failed
yarn run v0.24.5
$ "/Users/f6v/Documents/dev/web/ruby/app/node_modules/.bin/webpack" --config /Users/f6v/Documents/dev/web/ruby/app/config/webpack/production.js
Hash: 95f7ce45cd773f3782ce
Version: webpack 3.5.5
Time: 2520ms
                                Asset       Size  Chunks                    Chunk Names
    user_form-22e23310cdc8c50e78fc.js     797 kB       0  [emitted]  [big]  user_form
user_form-22e23310cdc8c50e78fc.js.map     981 kB       0  [emitted]         user_form
 user_form-22e23310cdc8c50e78fc.js.gz     182 kB          [emitted]
                        manifest.json  134 bytes          [emitted]
  [88] ./app/javascript/packs/user_form.js 22 bytes {0} [built]
  [89] ./app/javascript/user_form/index.js 255 bytes {0} [built]
 [190] ./app/javascript/user_form/functions/api.js 1.25 kB {0} [built]
 [191] ./app/javascript/user_form/functions/files.js 465 bytes {0} [built]
 [192] ./app/javascript/user_form/functions/utils.js 105 bytes {0} [built]
 [193] ./app/javascript/user_form/functions/messenger.js 249 bytes {0} [built]
    + 188 hidden modules

ERROR in user_form-22e23310cdc8c50e78fc.js from UglifyJs
Unexpected token: punc ()) [./app/javascript/user_form/index.js:5,46][user_form-22e23310cdc8c50e78fc.js:11879,47]
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

error Command failed with exit code 2.

[gauravtiwari]

Ohh that's uglify actually - uglify doesn't understand es6 yet.

[f6v]

@gauravtiwari could you point me how to teach it maybe?

[gauravtiwari]

@f6v You may wanna use https://babeljs.io/blog/2016/08/30/babili instead, remove uglify and replace it with babili

[f6v]

I ended up using this solution https://stackoverflow.com/questions/44287584/how-to-minify-es6-code-using-webpack

[mkalygin]

There is a tricky part with @f6v solution. Installing the new uglifyjs-webpack-plugin package works, but you need to replace Webpacker's default UglifyJs plugin with it. Here is how:

// config/webpack/environment.js
const { environment } = require('@rails/webpacker');
const UglifyPlugin = require('uglifyjs-webpack-plugin');

// Replace Uglify plugin with the new one.
environment.plugins.set('UglifyJs', new UglifyPlugin());

[hqt]

thanks @gauravtiwari for nice support.

[thadeu]

I'm using .babelrc below

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "node": "current"
      }
    }]
  ],

  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }],
    ["module-resolver", {
      "root": ["./app"],
      "alias": {
        "@assets": "./assets"
      }
    }]
  ]
}

"dependencies": {
    "@rails/webpacker": "^3.2.0",
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.25.0",
    "babel-loader": "7.x",
    "babel-plugin-module-resolver": "^3.0.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.2",
    "bootstrap-sass": "^3.3.7",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.6",
    "coffeescript": "1.12.7",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "font-awesome": "^4.7.0",
    "glob": "^7.1.2",
    "js-yaml": "^3.8.4",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "node-sass": "^4.5.3",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.6",
    "postcss-smart-import": "^0.7.4",
    "precss": "^1.4.0",
    "rails-erb-loader": "^5.0.2",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "select2": "^4.0.3",
    "style-loader": "^0.18.2",
    "tablesorter": "^2.28.15",
    "webpack": "3.10.0",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },

Its work for me.

[JarLowrey]

Just ran into this problem with Rails 5.2.1 and Webpacker 3.5.5. Setting my babelrc to the following fixed it, but will it still minify with the "uglify" option removed?

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "node": "current"
        }
      }
    ],
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

[imWildCat]

Here is my solution (reference: https://github.com/rails/webpacker/blob/master/docs/es6.md):

1. Add @babel/polyfill:

yarn add -D @babel/polyfill

1. Add import "@babel/polyfill" into your front-end app's entry file (eg. app/javascript/packs/application.js)

import "@babel/polyfill";

Done!

[sr3d]

@imWildCat's solution works for me with rails 5.2.2.

[jakeNiemiec]

Don't forget to also set useBuiltIns: 'entry' in your .babelrc (defaults to false)

Also note:

NOTE: Only use require("@babel/polyfill"); once in your whole app. Multiple imports or requires of @babel/polyfill will throw an error since it can cause global collisions and other issues that are hard to trace. We recommend creating a single entry file that only contains the require statement.

So, make sure that if you use @babel/polyfill in multiple entry files (/packs/*.js), don't load multiple entry files on a single page. If you find yourself needing to do this, consider using dynamic import to include the different files.