Rails 5.1 webpacker "import" a .js.erb file?

Question

From app/javascript/packs/application.js I'm trying to import "../foo" where the file is foo.js.erb. Webpacker and yarn are working great for other imports in application.js, for example import "../bar" when that file is bar.js but if I try with a .js.erb file I get this error from webpack-dev-server:

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve '../foo' in '/Users/blah/backlot/projects/test/app/javascript/packs'
 @ ./app/javascript/packs/application.js 3:0-27
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/javascript/packs/application.js

I do have rails-erb-loader installed and if I look at the webpacker config, the erb loader is being evaluated and looks right to me although I didn't touch any of that except for running rails webpacker:install to generate that config.

Sicken

Answer 1

If what you want to do is this:

import '../foo'

When the actual file is foo.js.erb, you need to update config/webpack/webpacker.yml to include

- .js.erb

In the list of extensions. Otherwise you need to fully specify the file name you are importing

import '../foo.js.erb'

Sicken

It seems it is no longer config/webpack/paths.yml but config/webpack/webpacker.yml that must be updated. Confusingly, the list of extensions already contains - .erb, but the extension to add is - .js.erb. – Switzerland

Don't forget to install .erb support for webpacker first: github.com/rails/webpacker#erb – Adenovirus

Update for rails 6, the path is config/webpacker.yml – Cermet

By fixing the file extension to .js.erb in config/webpacker.yml does not require to load as import '../foo.js.erb'. – Column

Answer 2

To add Erb support in your JS templates, run bundle exec rails webpacker:install:erb on a Rails app already setup with Webpacker.

source (from cseelus' comment)

Khosrow

Answer 3

For rails 6.x, run bundle exec rails webpacker:install:erb and add the following to the config/webpacker.yml

extensions:
  - .erb

See webpacker documentation for more info:

Maggie

Many thanks @Maggie It helped me to fix the same issue! – Cerise