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.

Answer 1

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:

Answer 2

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'

Answer 3

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)