How do I fix [Object Module] in image src of webpack output?

Question

I'm trying to set up a modern vanilla web starter with Webpack.

I got stuck when I added webpack-html-loader and html-loader. Here's what happens...

1. When I make use of an img tag in the entry index.html file, with an src attribute like this (./imgs/image.png), the src attribute in the dist folder is replaced with [object Module]. But when I remove the dot before the uri (./imgs/image.png to /imgs/image.png), the src output in the dist folder is exactly the same as that of the src. This doesn't reference the image I want to include.
2. Since the src value of the webpack output is exactly the same as the source, I try to be crude and use the uri to the image in the output folder like so /dist/img/image.png. This works, but it's not a great experience. I would love to use a uri to my image in the src folder and have webpack replace it with dist at build time. Is this possible?

Here's what my file structure looks like after npm run build

- dist
  - imgs
    - image.png
  - index.html
  - main.js
- node_modules
- src
  - index.html
  - imgs
    - image.png
- package.json
- package-lock.json
- webpack.config.js

Here's my webpack.config.js

const HTMLWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: false
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              outputPath: "imgs",
              publicPath: "imgs",
              name: "[name].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html")
    }),
    new CleanWebpackPlugin()
  ]
};

I made a repo of it here

Thanks a lot for your time

Update (02-01-2020)

Someone in the comment pointed out a solution to the problem. (When i using file-loader and html-loader in webpack. The src attr of image gonna be like '[object Module]')

The solution is to set the esModules object to false in the file-loader rule like so

{
  test: /\.(png|jpe?g)$/,
  use: [
    {
      loader: "file-loader",
      options: {
        // Here!!!
        esModule: false,
        outputPath: "images",
        publicPath: "images",
        name: "[name].[ext]"
      }
    }
  ]
}

Mccracken

Does this answer your question? When i using file-loader and html-loader in webpack. The src attr of image gonna be like '[object Module]' – Bureau

Answer 1

Please, take a look at this post:

When i using file-loader and html-loader in webpack. The src attr of image gonna be like '[object Module]'

Kinswoman

Answer 2

You can solve [object module] error through 'default' property: require('../../images/svg-1.svg').default

Redundancy

Can you please elaborate? – Keratitis

Answer 3

You can import the default value of what you are trying to import. for exemple : instead of doing this :

const mySVG = require('./path/to/svg');

do this

const mySVG = require('./path/to/svg').default;

Ailee