'Webpack can't resolve asset/resource?

I am trying to load an image in a project using webpack

asset
  resource
    image.png
src
  components
    global
      module
        module.js

In my js file, I have this line

import image from '../../../../asset/resource/image.png'

And in my webpack.config.js:

module.exports = {
  // snip
  module: {
    rules: [
      // snip
      {
        test: /\.png$/i,
        use: 'asset/resource'
      }
    ]
  },
  // snip
}

But on start, webpack throw an error:

ERROR in ./src/components/global/module/module.riot 1:0-86
Module not found: Error: Can't resolve 'asset/resource' in '/path/to/my/project'
resolve 'asset/resource' in '/path/to/my/project'
  Parsed request is a module
  using description file: /path/to/my/project/package.json (relative path: .)
    resolve as module
      looking for modules in /path/to/my/project/node_modules
        /path/to/my/project/node_modules/asset doesn't exist
      /path/to/my/node_modules doesn't exist or is not a directory
      /path/to/node_modules doesn't exist or is not a directory
      /path/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/components/global/ sync [a-zA-Z0-9-]+\.riot ./module/module.riot
 @ ./src/register-global-components.js 4:32-100
 @ ./src/index.js 4:0-67 7:0-24

webpack 5.66.0 compiled with 1 error in 3616 ms

So it looks like webpack doesn't find it's own built in package ? The doc s quite clear about t being built in and I don't see the difference with their example.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source