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

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 2
  • Comments: 46 (16 by maintainers)

Commits related to this issue

Most upvoted comments

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.

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
         }
       ],
       [

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

@JakeLaCombe environment.loaders.delete('nodeModules') fixes it for me.

fwiw, the previous hotfix (environment.loaders.nodeModules.exclude = /(?:@?babel(?:\/|\\{1,2}|-).+)|regenerator-runtime|core-js/;) does not.

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.

@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)
        }

This related issue has led me to a solution: https://github.com/babel/babel/issues/9903#issuecomment-491985234

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): https://github.com/rails/webpacker/pull/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/;

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…

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

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.

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 😃

Hey @jakeNiemiec, getting a different error with that hotfix (and Webpacker 4.0.5):

Uncaught TypeError: Cannot set property 'Rails' of undefined
    at rails-ujs.js:22
    at rails-ujs.js:37
    at rails-ujs.js:38
    at Module.<anonymous> (rails-ujs.js:822)
    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:8)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

@jakeNiemiec I ran a fresh project and I still run into the error. Here’s a gist of the requested files: https://gist.github.com/d-simon/faeda344a2c1a13b24c41e4eed041ac3

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.

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)

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

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