question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[object Module] in css files with svg files

See original GitHub issue

Hello 👋Thanks for this awesome plugin

I have some problem, then try to use it with svg files in css files

image

i use { optimizeImages: false } flag, but it not help

i think this is problem of svg-sprite-loader, i found same issues: https://github.com/JetBrains/svg-sprite-loader/issues/298 https://github.com/JetBrains/svg-sprite-loader/issues/324#issuecomment-490504223

but why hi process file, if i use { optimizeImages: false } ? maybe shoud use extract-svg-sprite-webpack-plugin if optimization off?

i just want copy file to image folder, and get generated url in css file

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:7

github_iconTop GitHub Comments

4reactions
saniaghcommented, Dec 29, 2019

Hi, I was having the same issue but with .png files being loaded as [object Module].

It was caused by the updates to file-loader and url-loader. So instead of the latest versions, I fixed the versions as follows:

"file-loader": "4.3.0" "url-loader": "2.3.0"

I also fixed "webp-loader": "0.6.0" but I don’t think it was causing this issue, I just figured I don’t need to take any risks.

2reactions
saniaghcommented, Mar 8, 2020

@saniagh Would you mind explaining this more? webpack noob here

In your package.json file search for file-loader, url-loader and webp-loader in ”dependencies”. Once you have identified where they are, replace them with:

"file-loader": "4.3.0" "url-loader": "2.3.0" "webp-loader": "0.6.0"

If you don’t have 1 of them, you don’t have to add it. Just replace the ones you find.

If you use yarn, it should work in a similar manner.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack file-loader outputs [object Module] - Stack Overflow
It looks like ES Module support was added to file-loader , css-loader , and other friends, but html-loader was missed. Once this bug...
Read more >
SVG - Parcel
SVG is a vector-based 2D graphics format based on XML, with support for interactivity and animation. Parcel includes support for SVG as a...
Read more >
css-loader | webpack - JS.ORG
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >
How to configure CSS and CSS modules in webpack
To load SVG files we use webpack file-loader. If you wouldn't have configured css-loader you would get an cryptic error like this: ERROR...
Read more >
How to Import SVGs in a React and Vite app - freeCodeCamp
SVG, short for Scalable Vector Graphic, is an image format used for rendering two-dimensional (2D) graphics on the internet. The SVG format ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found