Importing npm package causes error when compiling asserts in Webpack 4.x. Works just fine in Webpacker 3.x

[jameshibbard]

Hi,

I'm using the react-s-alert package and when I try to deploy my webpacker-based Rails/React app to production, the app is just a blank screen and I observe the error TypeError: t is not a function - s-alert-tools.js:22 in the console.

This is the specific file causing the error on GitHub.

Strangely, this only happens for Webpacker 4.x. With Webpacker 3.x everything works as expected.

Ruby: 2.6.0
Rails: 5.2.2
Webpacker: 4.0.0.rc.7
Yarn: 1.13.0

Steps to Reproduce:

• rails new myapp
• cd myapp
• Add gem 'webpacker', '>= 4.0.x' to the Gemfile
• yarn add @rails/webpacker@next
• bundle
• bundle exec rails webpacker:install
• bundle exec rails webpacker:install:react
• rails g controller site index
• In /app/views/layouts/application.html.erb replace the javascript_include_tag with <%= javascript_pack_tag 'hello_react' %>
• yarn add react-s-alert
• In app/javascript/packs/hello_react.jsx add: import Alert from 'react-s-alert';
• RAILS_ENV=production rake db:create db:migrate db:seed
• Run rake secret and copy the output
• export SECRET_KEY_BASE=output-of-rake-secret
• export RAILS_SERVE_STATIC_FILES="true"
• rake assets:precompile
• RAILS_ENV=production rails s
• Hit http://localhost:3000/site/index
• Observe TypeError: t is not a function in the console

Is this a bug in Webpacker? I'm reporting it here as the above steps work as expected using the latest 3.x release, but switching to Webpacker 4.x caused this error.

I'm stumped as to how to debug this any further and would appreciate any help.

[jakeNiemiec]

How are you importing the component?

[jameshibbard]

With ES2015 - import Alert from 'react-s-alert';

[jameshibbard]

Ah, found the issue. As mentioned here, adding:

environment.loaders.delete('nodeModules')

or indeed:

const nodeModulesLoader = environment.loaders.get('nodeModules');
if (!Array.isArray(nodeModulesLoader.exclude)) {
  nodeModulesLoader.exclude = (nodeModulesLoader.exclude == null)
    ? []
    : [nodeModulesLoader.exclude];
}
nodeModulesLoader.exclude.push(/react-s-alert/);

to config/webpack/environment.js fixes the issue.

[jakeNiemiec]

There was a PR to add this to the docs, not sure why it was rejected: https://github.com/rails/webpacker/pull/1893/files?short_path=4ac32a7#diff-4ac32a78649ca5bdd8e0ba38b7006a1e

[jameshibbard]

Oh man, it would have saved me some hours if it had been.