Webpacker: __webpack_require__(...) is not a function

[phortx]

• Create a app via rails new myapp --webpack=vue
• Add a app/javascript/images/wallpapers/ dir and upload a file, name it 7.jpg (the filename doesn't matter)
• Add a app/javascript/styles/application.scss with the content below
• Change the app/javascript/packs/application.js file like below
• Add <%= stylesheet_pack_tag 'application' %> and <%= javascript_pack_tag 'application' %> to the application.html.erb
• Start the rails and webpack server
• Everything if fine
• Make a change to the CSS file
• After the hot reload, the console shows the error seen below
• Restart the webpack server
• Reload
• Everything if fine again until the next SCSS change

app/javascript/packs/application.js:

import 'styles/application';
import 'images/wallpapers/7.jpg';

styles/application.scss:

body {
  background: black url('images/wallpapers/7.jpg') no-repeat center center;
  background-size: cover;
}

The error:

url.js?534f:7 Uncaught TypeError: __webpack_require__(...) is not a function
    at eval (url.js?534f:7)
    at Object.<anonymous> (application-333beb964a7e0140530c.js:121)
    at __webpack_require__ (application-333beb964a7e0140530c.js:20)
    at eval (websocket.js?a354:4)
    at Object.<anonymous> (application-333beb964a7e0140530c.js:628)
    at __webpack_require__ (application-333beb964a7e0140530c.js:20)
    at eval (transport-list.js?217c:5)
    at Object.<anonymous> (application-333beb964a7e0140530c.js:616)
    at __webpack_require__ (application-333beb964a7e0140530c.js:20)
    at Object.eval (entry.js?3b7c:3)

I've also setup a example repo to reproduce the bug: https://github.com/phortx/webpacker-bug

[gauravtiwari]

@phortx Could you turn on HMR in webpacker.yml and see if you get the same error? Seems to be a bug with webpack dev server with live reloading, where if you import same file in css and js file.

If you remove image files from application.js with live reloading the error will goes away:

app/javascript/packs/application.js:

import 'styles/application';
import 'images/wallpapers/7.jpg'; // remove this

Worth opening this issue on webpack dev server repo.

[phortx]

Activating HMR did help. Thank you very much.