Webpack file-loader outputs

Understanding the issue at hand

Webpack uses file-loader to compile your assets behind the scenes. Here is where things get funky; as of file-loader version 5.0.2, it switched gears to use ES module syntax instead of the good old CommonJS.

This causes an issue because import statements convert to an object housing a default property. This mismatch in module types leaves you with the [object Module] output in your compiled code.

Practical solutions and coding best practices

Tapping into the default export

Even though disabling ES modules seems promising, accessing the default export directly offers a more ES modules-friendly workaround:

import myPic from 'assets/logo.png'

// Just use myPic.default in your code, easy-peasy!


Troubleshooting HTML and image assets

If setting esModule to false didn't do the magic trick for you, it’s time to inspect your webpack config's defined rules for the HTML, fonts, and images.

Working with JSX

If you're working with JSX, you should mention your syntax changes for the image src command:

<img src={require('path/to/image.jpg').default} />


Package compatibility and version control

Keep your package.json up-to-date and ensure it has compatible versions of all webpack plugins and loaders. Worst-case scenario, time travel back to a file-loader version that is below 5.0.2 to dodge the [object Module] menace.

Unfolding advanced strategies

Staying up-to-date with loaders

Ensure your loaders like html-loader are fat on updates. This could eventually fix their ES module support and empty your bag of workarounds.

Community support to the rescue

Active community discussions, especially on GitHub issues like #4742, can keep you in the loop. You'll be clued in on any latest 'oh no' or 'aha' moments regarding module handling.

Leverage out-of-the-box asset handling

Remember, Webpack 5 came up with asset modules, a much eager substitute to file-loader. If your pockets are deep enough, consider upgrading your Webpack version and using resource or asset/resource types to handle your files without stooping down for any loaders.

Keep your configuration tidy

Don't forget, the cleaner your configurations and file paths, the smoother your asset management. So, be meticulous, test till your fingers bleed, and don't settle until every bit of your config is pitch-perfect.