webpack and file-loader seems to point to default: and not server url

Question

I had a working project with webpack 4, upgraded to 5 as well as all plugins to latest..

I was able to resolve most of the weird issues this migration presented thus far.

I am able to build and run the project, the output folder seems almost the same as before, and so far runtime seems to be almost there except for the following:

Access to image at 'default:/icon__x.svg;' from origin 'https://localhost:8000' has been blocked by CORS policy

Seems that the file-loader does not replace default with the server url as I would expect.

this is probably a misconfiguration on my part, but I spent a few hours trying to figure this out and probably searching in all the wrong places..

How can I make my file-loader point to the dev server base url and not to default:/?

Answer 1

Apparently.. even though I was going over the webpack guide and reading through the asset loading section, I missed that assets are not handled like this:

module:{
  rules: [
    ...
      {
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
        type: 'asset/resource',
      },

    ...
  ]
}

which solved the problem..

I really hope this saved you guys some time :)