esModule file-loader compat

[eric-hemasystems]

I recently upgraded an app from webpacker 4 -> 5. When I did that my "fontawesome" icons went away. I found the font was not loading despite being in the static_assets_extensions. When I looked at the compiled CSS it looked like:

@font-face {
  font-family: 'FontAwesome';
  src: url([object Module]);
  src: url("[object Module]?#iefix&v=4.7.0") format("embedded-opentype"), url([object Module]) format("woff2"), url([object Module]) format("woff"), url([object Module]) format("truetype"), url("[object Module]#fontawesomeregular") 

I did a search and found a related issue on stack overflow that indicates adding esModule: false to the fileloader options:

https://stackoverflow.com/questions/57671995/webpack-4-gives-background-urlobject-module-as-bg-image

I looked at the file-loader package and it appears in v5 they made a breaking change documented as:

switch to ES modules by default (the option esModule is true by default)

Since the file-loader config is controlled by webpacker making that config change would not be easy to do. Instead I downgraded to version 4.3 of file-loader and things are now working fine.

Seems either webpacker needs to be updated to use this esModule: false option or some other change needs to be made so it is compat with the new way file-loader is doing things.

[jakeNiemiec]

Are you using the sprite-loader from that SO question? How are you require'ing fontawesome? (CSS or JS)

[eric-hemasystems]

Not that I know of and I don't see it in my yarn.lock file.

• The dependencies line on my package.json is "font-awesome": "^4.7.0"
• app/javascripts/packs/application.js has import 'font-awesome/scss/font-awesome.scss'.
• config/webpacker.yml has extract_css: true
• app/layouts/application.html.erb has <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

[hoppergee]

I met a similar issue with file-loader and found a solution here. It may be useful for you.

environment.loaders.get('file').use.find(item => item.loader === 'file-loader').options.esModule = false

[PascalPixel]

Same here, no special loaders, but scss files are outputting src: url([object Module]); since upgrading webpacker. The above comment provided the solution by disabling esModule in file-loader.

[brendon]

I'm so glad I found this! Is this something that should be fixed in webpacker?

[aried3r]

Hey! I saw this and #2668. I think a more specific solution would be not to set esModule to false for every file extension but at least for those that are fonts and images like in https://github.com/freezy/vpweb/pull/54/files.

WDYT?