X Tutup
The Wayback Machine - https://web.archive.org/web/20210725061347/https://github.com/webpack/webpack/issues/13835
Skip to content

/ webpack

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inlined SVG extracted with invalid filename #13835

Open
hipstersmoothie opened this issue Jul 22, 2021 · 7 comments
Open

Inlined SVG extracted with invalid filename #13835

hipstersmoothie opened this issue Jul 22, 2021 · 7 comments
Labels
Send a PR bug webpack-5

Comments

@hipstersmoothie
Copy link

@hipstersmoothie hipstersmoothie commented Jul 22, 2021

Bug report

What is the current behavior?

When using css-loader with an SVG that is inlined the extracted SVG gets an invalid filename

If the current behavior is a bug, please provide the steps to reproduce.

  1. Use css-loader
({
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
});
  1. Set assetModuleFilename to something
{
  assetModuleFilename: 'media/[name].[contenthash:8][ext]'
}
  1. Have CSS with inlined SVG
.className {
  background: url(data:image/svg+xml;utf8,<svg width=%279px%27 height=%276px%27 viewBox=%270 0 9 6%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27><g id=%27Artboard%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27 transform=%27translate%28-636.000000, -171.000000%29%27 fill-opacity=%270.368716033%27><g id=%27input%27 transform=%27translate%28172.000000, 37.000000%29%27 fill=%27%230E242F%27 fill-rule=%27nonzero%27><g id=%27Group-9%27 transform=%27translate%28323.000000, 127.000000%29%27><path d=%27M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z%27 id=%27arrow%27></path></g></g></g></svg>)
}
  1. Run webpack

The image gets placed in the output with a filename like svg>.abc123 which breaks on a windows machine.

What is the expected behavior?

Webpack produces a file that doesn't break windows with .svg as the extension or omits the inlined SVG entirely

Other relevant information:
webpack version: 5.45.1
Node.js version: 14.16.0
Operating System: Windows
@sokra
Copy link
Member

@sokra sokra commented Jul 22, 2021

shouldn't the asset stay an data url anyway? Did you change that to an real asset?
@hipstersmoothie
Copy link
Author

@hipstersmoothie hipstersmoothie commented Jul 22, 2021

I used the filter url function to not include it, but I feel webpack should do that by default ootb. I hand the realized it happened until our window build broke.
@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Jul 22, 2021

@hipstersmoothie I don't understand you, what is mean doesn't break windows
@hipstersmoothie
Copy link
Author

@hipstersmoothie hipstersmoothie commented Jul 23, 2021

The build worked fine on Mac but when we tried to build our app on windows we got this error (presumably because > isn't a valid character in a filename)

CleanShot 2021-07-22 at 17 09 42

So either producing a filename that works on all platforms or not extracting the inlined SVG at all would be better default behaviors.
@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Jul 23, 2021

So either producing a filename that works on all platforms or not extracting the inlined SVG at all would be better default behaviors.

You can setup it on own side
@hipstersmoothie
Copy link
Author

@hipstersmoothie hipstersmoothie commented Jul 23, 2021

Yeah I understand that and I've done that, I just think that this isn't an error a user should have to encounter and notice, webpack + it's loaders out of the box shouldn't produce this bug. Or there should at least be a note somewhere in the docs explaining that you must configure it. I'm willing to make a PR for either approach.

The bug happens here when webpack runs basename on the SVG resulting in </svg> being the last part of the path so svg> becomes the filename.
@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Jul 23, 2021

The bug happens here when webpack runs basename on the SVG resulting in being the last part of the path so svg> becomes the filename.

We should fix it, and yes you can send a PR to docs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Send a PR bug webpack-5
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
@hipstersmoothie @sokra @alexander-akait @webpack-bot
X Tutup