-
-
Notifications
You must be signed in to change notification settings - Fork 256
Add note about JSX usage #35
Comments
@kswope Thanks for Sharing, though. :) |
Ah thank god I found this. I agree it would be great to change the title of the issue for future people who are banging their heads against this. |
Anyone wants to update the readme with PR? |
I was having this problem today and, downgrading to "babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-react-app": "3.0.2",
"file-loader": "0.11.2" // using 1.0.0, doesn't work in my case, I was importing the file in the top: import IntroImage from '../../images/1@2x.png';
import Slide0Image from '../../images/2@2x.png';
... code
<img src={IntroImage} />
... etc Using I managed to isolate the scenario in this repo: https://github.com/oieduardorabelo/file-loader-error |
@oieduardorabelo known issue, should be fixed after #183 |
Just spent the last few hours (more than a few?) on this problem and it was entirely avoidable but I haven't seen any docs on it.
If you are using JSX (and therefor probably babel-loader) you do not need to use file-loader or url-loader for img tags in the JSX, its somehow already handled by babel. I somehow knew JSX was handled by babel-loader, but I have no idea how that came about, but as a bonus it handles the stuff of file-loader.
I eventually figured this out because I was doing this, which seems to be the right way to do it
But having png files handled by both babel-loader and file-loader meant the browser was displaying a broken image, which I eventually downloaded and opened, and instead of ugly binary, it was this :)
The text was updated successfully, but these errors were encountered: