Skip to content
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

Transparent png breaks loaders #396

Closed
tbillington opened this issue Aug 8, 2016 · 6 comments
Closed

Transparent png breaks loaders #396

tbillington opened this issue Aug 8, 2016 · 6 comments

Comments

@tbillington
Copy link

I get an error when loading a png file with transparency. I tried in the javascript and in the css, same result for both. When I load it in the browser though the image loads and works anyway.

Failed to compile.

Error in .img/btn-search.png
Module parse failed: /img/btn-search.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
 @ ./~/react-scripts/~/css-loader!./~/react-scripts/~/postcss-loader!./src/SearchBox/SearchBox.css 6:274-330
@gaearon
Copy link
Contributor

gaearon commented Aug 8, 2016

Is your image file inside src directory?
It should be because Webpack will only process files there in our setup.

@tbillington
Copy link
Author

Ah, I see! Makes sense. Is there a way to opt-out so to speak, for a particular line or file? I guess having the css file separate and including it in the html would be one way. I'm integrating the app created from this tool into an existing vanilla js page.

This can be closed.

@gaearon
Copy link
Contributor

gaearon commented Aug 9, 2016

We are thinking about ways to reference images elsewhere (outside of Webpack). But this would mean you'd have to think about content hashes yourself: currently Webpack does it for you.

Can you explain more about why you don't want to put the image next to the CSS using it?

@tbillington
Copy link
Author

In this particular instance the site is already including the image in regular html fashion, so I wanted to link to that, which was outside of the react app. In this instance the react app was being embedded in an existing html page with it's own shenanigans going on. It's probably not the correct use case for this project but I'm making it work :).

I solved this by just using the data url inline in the css instead of linking to the image. It does mean there is technically duplication but it's only a small image so I'm not too worried.

@tbillington
Copy link
Author

I guess 'solved' is the wrong word, more a workaround. But I think it's because of my non-standard use case.

@gaearon
Copy link
Contributor

gaearon commented Aug 10, 2016

Yeah, let’s close for now. Maybe if more such use cases come up we can figure out a better common solution. Thanks.

@gaearon gaearon closed this as completed Aug 10, 2016
@lock lock bot locked and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants