webpackwebpack-file-loaderwebpack-html-loader

When using file-loader and html-loader in webpack the src attr of image is '[object Module]'


I am doing a project with webpack4 from scratch. But when I try to display an image in an HTML file, I face a weird problem: After npm run build, the src of image tag is built as <image src="[object Module]". The HTML part is:

<img src="images/main_background.jpg">

The webpack.config.js is this :

   // ignore ...
   {
    test: /\.html$/,
    use: [
       {loader: 'html-loader'}
    ]
   },
   {
      test: /\.(jpeg|jpg|png)$/,
      use: [
        'file-loader'
      ]
  }


And the version of these two loaders:

"file-loader": "^5.0.2",
"html-loader": "^0.5.5",

I can't figure out what the issue is...


Solution

  • Try adding esModule: false option to file-loader like so:

      ...
      {
        test: /\.(jpeg|jpg|png)$/,
        use: [
          loader: 'file-loader',
          options: {
            esModule: false
          }
        ]
      }
      ...
    

    Same applies to url-loader.

    esModule option has been introduced in file-loader in version 4.3.0 and in 5.0.0 it has been set to true by default which can be a breaking change.

    Sources: