[Webpack]Error report of introducing SVG file into img tag ? Please refer to the screenshot.

[webstager]

[bhovhannes]

Hi, please let me know how can I reproduce the issue.

Ideal would be to provide a repo with webpack configured and the image under question, where I can run something and see the error.

Otherwise I have no idea what can be wrong.

[webstager]

Hi, please let me know how can I reproduce the issue.

Ideal would be to provide a repo with webpack configured and the image under question, where I can run something and see the error.

Otherwise I have no idea what can be wrong.

In webpack config:
{ test: /\.svg$/, loader: 'svg-url-loader', options: {} }

in html:
<img src="test.svg">

[bhovhannes]

What is your webpack version?

[webstager]

What is your webpack version?

4.11.1

[bhovhannes]

@Xiang0308 to be honest I don't understand your repo setup. Webpack does not parse HTML and you say that you have <img src="test.svg"> inside HTML...
Unless you have some loader for HTML files and import that HTML file inside your JavaScript. In that case you should have more that one loader in a chain, and who knows, maybe some specific loader combination is causing the issue you faced.

That's why my first reaction was to provide a repo where everything is configured and where I can reproduce the error.

Basic use cases are covered by tests in this repo, so I am confident they work.

[efkan]

I've run into the same issue after changed webpack configuration as following:

[wesleybl]

This error happened to me. I have a scss with the content:

.icon-compose.toolbar-menu-icon::before {
  content: url('./img/compose.svg');
}

The svg in question is this:

@bhovhannes can you please check if this error occur to you?

[bhovhannes]

@wesleybl please provide a minimal sample repo illustrating the issue, so I can investigate further. So I can run npm install there, then build and see the output.
There are plenty of possible loader configurations which handle SVG. I cannot guess which one represents your case.

[wesleybl]

@bhovhannes the error occurred to me in this repository:

https://github.com/collective/collective.cover/tree/master/webpack

The webpack configuration in this repository at tag 1.1b5:

https://github.com/collective/sc.recipe.staticresources/tree/1.1b5

See: https://github.com/collective/collective.cover/blob/master/webpack/package.json#L28

For now I'm using node 14.

It still doesn't have svg, but just insert it, as said in the previous comment.

The output images will be in the directory:

https://github.com/collective/collective.cover/tree/master/src/collective/cover/browser/static

Any questions just ask.

[bhovhannes]

@wesleybl can you please remove all non-relevant stuff, leave only one small *.scss file with the content you posted here, with the webpack.config.js, and push the result to some branch, so I don't have to go over readme and the python codes to understand what this repo does and how to build, etc.?

That will help a lot, as it will become a failing unit test which will be added to existing test suite.

[wesleybl]

@bhovhannes you don't have to worry about python code. All you need is node 14 with yarn. Perhaps you could use nvm. Then you can go folder:

https://github.com/collective/collective.cover/tree/master/webpack

and do:

yarn
yarn build

[bhovhannes]

@wesleybl I know you provided all links which can be put together to reproduce the problem. However, I repeat:

can you please remove all non-relevant stuff, leave only one small *.scss file with the content you posted here, with the webpack.config.js, and push the result to some branch, so I don't have to go over readme and the python codes to understand what this repo does and how to build, etc.?
That will help a lot, as it will become a failing unit test which will be added to existing test suite.

The reason is I need to see webpack configuration, source code (*.svg file, *.scss file) and the build command together, in one place to be able to debug and provide a solution. Unless I won't be sure I have reproduced your case correctly. And I don't want to spend time on fixing something unrelated to the problem you are experiencing.

Providing a minimal repo to reproduce the problem is something many open-source packages demand. To summarize, I believe that:

• minimal repo narrows down the problem and makes the problem clear for both issue opener and maintainer
• minimal repo helps maintainer a lot and creating it is a lower effort for issue opener than for maintainer
• having minimal repo maintainer knows exactly what he needs to fix

Thanks for understanding!

[wesleybl]

@bhovhannes I'm pretty sure the problem could be one of unsatisfied dependency. I get for example:

warning "sc-recipe-staticresources > svg-url-loader > file-loader@4.0.0" has incorrect peer dependency "webpack@^4.0.0".

I'll try to update the versions, to see if it works. If it doesn't work, I create the repository for testing. Thanks!