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

ankane · 2019-05-29T21:41:06Z

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

The text was updated successfully, but these errors were encountered:

ankane · 2019-05-29T21:46:56Z

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 · 2019-05-29T22:42:39Z

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

d-simon · 2019-05-29T22:42:58Z

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 · 2019-05-29T22:45:44Z

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 · 2019-05-30T01:52:32Z

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 · 2019-05-30T01:57:34Z

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

wilpar · 2019-05-30T02:04:54Z

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

wilpar · 2019-05-30T02:09:41Z

yes, error persists.
steps

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

same error

running a mac, latest os, latest ruby 2.6.3

wilpar · 2019-05-30T02:15:36Z

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 · 2019-05-30T02:35:21Z

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 · 2019-05-30T02:38:00Z

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

justalever · 2019-05-30T02:40:34Z

Thanks @AmirolAhmad. I totally missed that.

ankane · 2019-05-30T02:59:08Z

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

ankane · 2019-05-30T03:16:23Z

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 · 2019-05-30T14:32:45Z

@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?

Xanthus · 2019-05-30T14:44:26Z

Same issue here: clean Ruby 2.6.3, Rails 6.0.0.rc1 and new app with that error.

Think it's safe to say a lot people building a new Rails 6.0.0.rc1 app at the moment are in for some head scratching. Only found this issue and the fix (thanks @ankane !) by explicitly navigating here - Googling will send you on a bit of a goose chase.

jakeNiemiec · 2019-05-30T15:42:39Z

~~I am unable to reproduce the issue in a fresh app. It would be immensely helpful if someone experiencing this issue could put the following in a https://gist.github.com/ :~~

Edit: found a way to reproduce. Looking into it...

Fixes #2109 Error on fresh app

jakeNiemiec · 2019-05-30T17:41:06Z

This related issue has led me to a solution: babel/babel#9903 (comment)

I have been thinking about this issue today, and I think that the proper solution would be to transpile @babel/runtime's helpers using @babel/plugin-transform-runtime itself.
This is tricky, because we should avoid transpiling everything else except for polyfills, to avoid injecting references to themselves inside the helpers.

I have created a PR to fix this here (works with corejs: 3): #2110

Edit: You can hotfix by putting this in your environment.js file:

environment.loaders.get('nodeModules').exclude = /(?:@?babel(?:\/|\\{1,2}|-).+)|regenerator-runtime|core-js|webpack/;

wilpar · 2019-05-30T18:12:05Z

OT: Remember when we moved from 4:3 TVs to 16:9? Webpacker feels the same.

Fixes #2109 Error on fresh app

gauravtiwari · 2019-05-30T18:43:30Z

released 4.0.5

ankane · 2019-05-30T18:51:03Z

Hey @jakeNiemiec and @gauravtiwari, thanks for the quick fix. I'm still seeing the same error with Webpacker 4.0.5 unfortunately. Maybe someone else in this thread can also try it?

(I reran the repro instructions above and confirmed webpacker 4.0.5 in Gemfile.lock and package.json)

meredoschi · 2019-05-30T18:58:54Z

Perhaps it is the same issue. I have seen similar messages in my setup here. I am trying to run the "Hello vuejs" on Rails 5.2.3, ruby 2.6.1 on a Mac machine. And I get similar messages. Thank you in advance for the assistance.

gauravtiwari · 2019-05-30T19:04:22Z

Oh I see, it might have to do with node_modules loader. Checking..

gauravtiwari · 2019-05-30T19:13:13Z

@ankane I don't think you need the corejs option there

 require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true,
          corejs: 3
        }

since this should be handled by preset-env anyway. Unless I am missing something?

gauravtiwari · 2019-05-30T19:14:06Z

https://babeljs.io/docs/en/babel-preset-env#usebuiltins

jakeNiemiec · 2019-05-30T19:43:37Z

@ankane @meredoschi Can you tell me if putting: environment.loaders.delete('nodeModules'); in your config/webpack/environment.js file fixes it?

gauravtiwari · 2019-05-31T08:09:02Z

Released 4.0.6, thanks @jakeNiemiec

BTW, I am wondering would it make sense to make nodeModules rule optional and let people declare deps that they want to compile with babel instead of us compiling everything by default. The idea earlier to keep the output consistent (ES5) but it seems it's breaking more things than helping.

gauravtiwari · 2019-05-31T08:10:49Z

Basically something along this line, so we declare packages that needs compiling (should be done by authors but if not)

environment.compileNodeModules(['es6-package', 'some-other-es6-package'])

ankane · 2019-05-31T08:28:05Z

fwiw, seeing the same error as reported in #2109 (comment) in 4.0.6

gauravtiwari · 2019-05-31T08:32:55Z

@ankane Sorry about that. I would say to disable corejs for runtime for now, will look into this properly and propose a fix.

 require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true,
          corejs: false // or just remove this line (default is false)
        }

d-simon · 2019-05-31T10:47:43Z

Can confirm: I'm getting the very same error as @ankane is getting with a fresh 4.0.6.
—
Thanks for looking into it and providing solution 👍🏻 I'm now off again to continue my exploration of Rails 6 now :)

ansonhoyt · 2019-05-31T14:55:10Z

Can confirm as well. Same error as @d-simon and @ankane with 4.0.6 (updated from a fresh 4.0.4).

No errors if I use corejs: false as @gauravtiwari suggested.

jakeNiemiec · 2019-05-31T18:46:11Z

I started testing what @babel/plugin-transform-runtime was actually giving us. Pardon the sloppy writeup, skip to the bottom for a summary.

For the following, I simply import an empty class from another file:

@babel/plugin-transform-runtime (corejs: 3) On vs off https://www.diffchecker.com/z1BMrLR3 (same)
@babel/plugin-transform-runtime corejs: false vs 3 https://www.diffchecker.com/dDveSP8f (same)

These gave the same result. The same thing happens if I just require("@rails/ujs").start() or just require("turbolinks").start().

File that contains just require("channels") with @babel/plugin-transform-runtime corejs: false vs 3 https://www.diffchecker.com/jdYGcjOm.

In this one, you can see that no polyfilling is occurring when corejs: false. Additionally the corejs: false output is identical to the output I get if @babel/plugin-transform-runtime is commented out altogether.

core-js
Specifying a number will rewrite the helpers that need polyfillable APIs to reference core-js instead.

It seems like the default babel helpers option is overridden by the default webpacker babel.config.js. Setting corejs: 3 will (seemingly) supersede helpers: false which inlines the corejs polyfill helpers.

TL;DR: Take a simple example where I import a class and build for production: https://www.diffchecker.com/MBZsEotj. @babel/plugin-transform-runtime {corejs: 3} (left) gives us ~700 extra lines on top of our (already) polyfilled 49 lines code.

The plugin is characterized as a plugin that enables the re-use of Babel's injected helper code to save on codesize, but I could not generate a single example where the size was reduced.

lastobelus · 2019-06-01T03:55:33Z

With v4.0.6 there is a new error [#2114] now (but only if using webpack-dev-server)

jembuilt · 2019-06-02T03:32:02Z

corejs: false

worked for me

- Prevents `@babel/plugin-transform-runtime` from rewriting babel helpers in core-js. - Remove unneeded runtime `@babel/runtime-corejs3` cc: #2031, #2109

jakeNiemiec · 2019-06-03T16:49:20Z

Everyone with this issue: Please check your personal babel.config.js against the default babel.config.js:

Inside your projects babel.config.js:
- Around line 33 of @babel/preset-env should contain corejs: 3
- Around line 61 of @babel/plugin-transform-runtime should contain corejs: false

PR: #2116

I'm going to keep this issue open for a while to ensure the problem has been fixed for good.

ankane · 2019-06-03T20:35:10Z

Awesome, thanks @jakeNiemiec! Can confirm the latest version works on both a fresh and existing app.

added gem 'gravatar_image_tag' replaced .postcssrc.yml with postcss.config.js fix to babel.config.js (see rails/webpacker#2109 (comment)) add app/javascript/styles/base.css with tailwind imports add stylesheet_pack_tag 'base' to app layout add resolve_paths to config/webpacker.yml add postcss-preset-env, and remove postcss plugins it encompasses play with some example tailwind styles on app/views/pages/hello.html.slim

Fix issues related to this bug rails/webpacker#2109

ankane · 2019-09-04T07:21:40Z

Think we can close, as this was fixed in the 4.0.7 release. Thanks again @jakeNiemiec

- Prevents `@babel/plugin-transform-runtime` from rewriting babel helpers in core-js. - Remove unneeded runtime `@babel/runtime-corejs3` cc: rails/webpacker#2031, rails/webpacker#2109

jakeNiemiec added a commit that referenced this issue May 30, 2019

fix: Don't let babel & core-js transpile each other

2951768

Fixes #2109 Error on fresh app

jakeNiemiec mentioned this issue May 30, 2019

fix: Don't let babel & core-js transpile each other #2110

Merged

gauravtiwari closed this as completed in #2110 May 30, 2019

gauravtiwari pushed a commit that referenced this issue May 30, 2019

fix: Don't let babel & core-js transpile each other (#2110)

afab21c

Fixes #2109 Error on fresh app

gauravtiwari closed this as completed in #2111 May 31, 2019

jakeNiemiec mentioned this issue Jun 3, 2019

Arrow functions are not being transpiled in production #1418

Closed

jakeNiemiec reopened this Jun 3, 2019

jakeNiemiec changed the title ~~Rails 6.0.0.rc1: Error on fresh app~~ Uncaught TypeError: __webpack_require__(...) is not a function error on fresh app Jun 3, 2019

jakeNiemiec changed the title ~~Uncaught TypeError: __webpack_require__(...) is not a function error on fresh app~~ Uncaught TypeError: __webpack_require__(...) is not a function - error on fresh app Jun 3, 2019

jakeNiemiec added the bug label Jun 3, 2019

jakeNiemiec added a commit that referenced this issue Jun 3, 2019

fix: Stop babel from rewriting babel helpers in core-js.

37064df

- Prevents `@babel/plugin-transform-runtime` from rewriting babel helpers in core-js. - Remove unneeded runtime `@babel/runtime-corejs3` cc: #2031, #2109

jakeNiemiec mentioned this issue Jun 3, 2019

fix: Stop babel from rewriting babel helpers in core-js. #2116

Merged

jakeNiemiec mentioned this issue Jun 3, 2019

[4.0.6] using webpack-dev-server in fresh rails app results in Uncaught TypeError #2114

Closed

jakeNiemiec added the babel/coreJs label Jun 10, 2019

cwinand added a commit to cwinand/diplomacy that referenced this issue Aug 14, 2019

Fix webpacker bug

908800a

Fix issues related to this bug rails/webpacker#2109

jakeNiemiec mentioned this issue Aug 19, 2019

Failed to compile - Capistrano Rails app deployment #2236

Closed

ankane closed this as completed Sep 4, 2019

jakeNiemiec mentioned this issue Feb 3, 2020

How to configure terser? #2131

Closed

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

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

Comments

ankane commented May 29, 2019 • edited Loading

Repro Steps

Expected Result

Actual Result

ankane commented May 29, 2019 • edited Loading

jakeNiemiec commented May 29, 2019 • edited Loading

d-simon commented May 29, 2019 • edited Loading

ankane commented May 29, 2019

wilpar commented May 30, 2019

ankane commented May 30, 2019

wilpar commented May 30, 2019

wilpar commented May 30, 2019

wilpar commented May 30, 2019

justalever commented May 30, 2019 • edited Loading

AmirolAhmad commented May 30, 2019

justalever commented May 30, 2019

ankane commented May 30, 2019

ankane commented May 30, 2019

jakeNiemiec commented May 30, 2019

Xanthus commented May 30, 2019

jakeNiemiec commented May 30, 2019 • edited Loading

jakeNiemiec commented May 30, 2019 • edited Loading

wilpar commented May 30, 2019

gauravtiwari commented May 30, 2019 • edited Loading

ankane commented May 30, 2019 • edited Loading

meredoschi commented May 30, 2019

gauravtiwari commented May 30, 2019

gauravtiwari commented May 30, 2019

gauravtiwari commented May 30, 2019

jakeNiemiec commented May 30, 2019

gauravtiwari commented May 31, 2019

gauravtiwari commented May 31, 2019

ankane commented May 31, 2019

gauravtiwari commented May 31, 2019

d-simon commented May 31, 2019

ansonhoyt commented May 31, 2019

jakeNiemiec commented May 31, 2019

lastobelus commented Jun 1, 2019

jembuilt commented Jun 2, 2019

jakeNiemiec commented Jun 3, 2019

ankane commented Jun 3, 2019

ankane commented Sep 4, 2019

ankane commented May 29, 2019 •

edited

Loading

ankane commented May 29, 2019 •

edited

Loading

jakeNiemiec commented May 29, 2019 •

edited

Loading

d-simon commented May 29, 2019 •

edited

Loading

justalever commented May 30, 2019 •

edited

Loading

jakeNiemiec commented May 30, 2019 •

edited

Loading

jakeNiemiec commented May 30, 2019 •

edited

Loading

gauravtiwari commented May 30, 2019 •

edited

Loading

ankane commented May 30, 2019 •

edited

Loading