Why is the Asset Manager from Webpack not loading my image file?

Question

I´m following the tutorial for this. But when trying to build the bundle, it tells me the following error:

ERROR in ./src/index.js 2:14
Module parse failed: Unexpected token (2:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import _ from 'lodash';
> import lydImg './lyd.jpg';
| import './style.css';
|

The code from my webpack.config.js is:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [{
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

And my index.js:

import _ from 'lodash';
import lydImg './lyd.jpg';
import './style.css';

function component() {
  const element = document.createElement('div');

  // Lodash, now imported by this script
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello')

  const lyd = new Image()
  lyd.src = lydImg
  element.appendChild(lyd)

  return element;
}

document.body.appendChild(component());

Maybe is it my files/folder structure? Do I need to install additional dependencies?

Answer 1

Try this syntax:

import lydImg from './lyd.jpg';