Uncaught TypeError: __webpack_require__(...) is not a function - error on fresh app

[ankane]

Repro Steps

Create fresh rails app

rails _6.0.0.rc1_ new hello

Add a controller and a view, then load it.

Expected Result

JavaScript loads correctly.

Actual Result

Uncaught TypeError: __webpack_require__(...) is not a function
    at Module../node_modules/webpack/buildin/harmony-module.js (harmony-module.js:33)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js (rails-ujs.js:822)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/packs/application.js (application.js:6)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

May be related to recent release / #2031

[ankane]

For others experiencing this issue, you can remove both the corejs: 3 lines from babel.config.js and run:

rails tmp:clear

Restart your web server and it should work.

[jakeNiemiec]

Can you post your package.json & babel.config.js?

[d-simon]

I have the same error on a fresh app. In addition to your solution I also had to change the corejs version in the babel.config.js to version 2 (two occurences) to get this to work.

Update: I actually removed both corejs occurences. Only then it worked for me.

[ankane]

package.json

{
  "name": "hello",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.4",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.4.1"
  }
}

babel.config.js

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        require('@babel/preset-env').default,
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        require('@babel/preset-env').default,
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      [
        require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true,
          corejs: 3
        }
      ],
      [
        require('@babel/plugin-transform-regenerator').default,
        {
          async: false
        }
      ]
    ].filter(Boolean)
  }
}

[wilpar]

Same issue here, same package.json and babel.config.js

Tried to change the webpacker gem version as suggested above, no luck.

Was attempting to get Bootstrap installed, but have moved back to first installation to debug. Further information on my SO thread: https://stackoverflow.com/questions/56366873/cant-install-bootstrap-in-new-rails-6rc1-project-error-in-harmony-module-js

[ankane]

@wilpar @d-simon Did you run rails webpacker:install and overwrite all the files after downgrading Webpacker to 4.0.2?

[wilpar]

Doing a completely new project with --skip-webpack-install and changing version before installing webpack. results in a few minutes.

[wilpar]

yes, error persists.
steps

1. rails new testapp --skip-bundle --skip-webpacker-install
2. change webpacker version to 4.0.2 and run bundle and webpacker install
3. add simple scaffold, change root to the index action

same error

running a mac, latest os, latest ruby 2.6.3

[wilpar]

I have removed the corejs lines from babel.config.js and the error has gone away, but I am now receiving the deprecation warnings

[justalever]

Experiencing this error as well. Brand new 6.0.0.rc1 app on ruby 2.6.3. Downgrading the gem and reinstalling webpacker still resulted in errors.

[AmirolAhmad]

dont forget to change the "@rails/webpacker": "^4.0.2" in your package.json and run yarn install again

[justalever]

Thanks @AmirolAhmad. I totally missed that.

[ankane]

fwiw, it works for me without changing package.json. You may need to run rake tmp:clear after downgrading the Webpacker gem.

[ankane]

Sorry the noise. It looks like downgrading isn't really needed. All downgrading does is effectively remove the corejs: 3 lines from babel.config.js, so you can do that by hand and run rails tmp:clear. Will update the solution above.

Here's the min difference between working and not working:

diff --git a/babel.config.js b/babel.config.js
index b8b230b..f930f3e 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -30,7 +30,6 @@ module.exports = function(api) {
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
-          corejs: 3,
           modules: false,
           exclude: ['transform-typeof-symbol']
         }
@@ -57,8 +56,7 @@ module.exports = function(api) {
         require('@babel/plugin-transform-runtime').default,
         {
           helpers: false,
-          regenerator: true,
-          corejs: 3
+          regenerator: true
         }
       ],
       [

[jakeNiemiec]

@ankane I see that you specify useBuiltIns: 'entry', but don't have core-js or regenerator-runtime prerequisites in your package.json. I tried to convey this requirement in the changelog.

Could you test the corejs: 3 config again with those packages installed?