-
-
Notifications
You must be signed in to change notification settings - Fork 27k
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
public directory css url #9937
Comments
I was about to make report the same issue. Though I'm trying to update from 3.4.3 to 4.0 |
Same here with scss module. I think I found a related commit by @atlanteh here:
Does this means that now And what about fonts and other references of file in css ? 🤔 |
@thomasleduc No. |
I use sass module too and this is definitely not working. I'm glad to do some very little work for create react app, but really the repo needs a proper doc to contribue 😅 I was struggling because So I reverted your commit and I had a different error but it is still here. With the revert of your commit it has the absolute url Without the revert, it has the relative url But I confirm, the error remains present in any case. Thanks for your answer @atlanteh but do you have any clues on how to fix it, it seems you have a good understanding of the resolve-url-loader 😅. I want to give a try to fix the issue because we really needs it to work on our project. I currently investigate this commit 1cbc6f7 from multiple authors that I can't just revert. But there are many changes on from where the file are loaded. |
#9833 may be the same bug |
I just upgraded my project to use [email protected] and it still works.
This works for me both in development and in production Upon reading the issue more thoroughly, I think that the issue is that you are referencing images from public directory, which I guess my commit doesn't allow anymore. Actually I think the new solution is better
Can you please check if this solution work for you? |
@atlanteh I was facing the same issue described by others above, and as you suggested, moving the assets files used by *.scss files from .header-bg {
background-image: url('/assets/images/home-bg-black.png');
} This does not work:
After moving the files to /src:
Thanks! |
for me only works after I use relative paths to my images folder (that I moved from public folder). maybe something wrong with my tsconfig?
also I needed to include the |
Maybe change the template as well to add some image in src/assets/images
This is already fixed on master. I'm afraid we have to wait for the next release. ¯_(ツ)_/¯ Anyway, Thanks a lot for your time @atlanteh. It is greatly appreciated 👍 |
I thought I was going crazy. 5 mins to get the app running 2 hours of googling to fix this issue :/ Also moving images inside source is not a solution if you want common inline and sass referenced images without duplicating them |
@makis-spy |
@atlanteh oh no worries mate! Maybe you can shed some light. So I have a public/img folder and a src/img folder < img src="/img/me.png" /> calls public/img .avatar { Do I need 2 images of me ? What I am finding works for anyone needing a quick fix is keeping 2 sets of images (ducks a tomato) One in public for after rendering One in source just to bypass the file not found by loader |
I think your
|
@atlanteh If I use an image very often, say a logo that I put everywhere. It seems to me that inline this logo is not the solution even if it's small. Say I use it 50 times in page, if I fetch the image, it would be cached in browser and reused across the all page. I think the developer should have the choice to make a http call or inline the image. don't you think ? Again, it is not your fault, and I'm glad you're here to help :) |
@thomasleduc If you import this image in a Logo component and use that component everywhere, I think everything should be ok. Since this image is only imported once, and only the Logo reference is being used everywhere, so the bundle should not be affected by the times the Logo is used. https://create-react-app.dev/docs/adding-images-fonts-and-files/
|
Ohh ok, I didn't think it this way. |
This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs. |
I'm surprised that more people haven't realised that this is a major concern for SEO. Lets say that you have a image file within the src folder, and you're using it within your CSS file like this - .Profile { If this profile.png file is inside the https://{my-domain.com}/static/media/profile.{hash}.jpg This {hash} value changes with every build. Therefore, if you use this in a static website, and if your website is crawled by google bot, you may see 404's reported in the google search console the next time you deploy, because Google can take several weeks before indexing your site again. This is where an image in the |
I also had this issue this week. And I agree about the SEO comment from @sagar7993 |
same issue |
Been dealing with the same issue for couple of hours now. Uninstalling and reinstalling node_modules didn't do much... |
Almost one year. issue isn't fixed yet... |
I'm using craco to modify my webpack config. I created Only this one solution worked for me, but it creates hashes for imported files so it is not ideal resolution for problems mentioned above. |
Same problem.
I also tried to create assets folder in src, but getting same error:
|
This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs. |
Not stale: I'm having the same issue and looking for a solution that does not imply:
|
Not sure if this is helpful, but I managed to solve this issue by prefixing background-image: url("~/public/example.svg"); |
Downgraded react-scripts to ^3.4.0 and all is well now. |
Same issue with me, after I upgrade react-script 4.0.0 from 3.4.0。。。。 |
what is the recommendation here?
|
I had
resolved!
|
@Hew007 ooi where are you adding this? |
|
We were using node-gyp v3.8.0, which has a bug preventing it to be used with Python3 However, we build on Alpine Linux, which requires Python3. As the bug was showing up while building node-sass, the later was also updated to a compatible version. It also helps as the node-sass version was ancient and did not work with all recent node.js versions. However, as `react-scripts` depended on `sass-loader` v8, and `sass-loader` depends on `node-sass` v4.x.x, we also had to bump `react-scripts`. The first version to support `sass-loader` v11 was v4.0.2 and v4.0.3 is the latest version as of the time of this commit. This then led to facebook/create-react-app#9937 which is worked around by simply moving the assets.
Even after setting |
This seems the best solution so far |
Expect for css-loader, I setting |
great! I got the same isuse, it disturbed me in one whole day, even i can't sleep all night, perfert, thank you. I upgraded react to 18, while upgrading react-script to 5, |
What's the easiest way to override this line without having each individual developer edit the node_modules after each fresh checkout ? Can react-scripts add a new simple option to be read from a top-level script? |
@atlanteh this issue would be important to fix in my opinion. In our case we leverage the different behavior of the public assets of not being renamed with random string to do file replacement afterward in the build. We have different flavor of products that use the same |
@olignyf This is not my decision to make as I'm just another user here like you, plus unfortunately CRA is no longer maintained, so if you want you can just fork it and fix it however you like or move to other alternatives :) |
Hi all,
Hope you guys find it helpful! |
Describe the bug
When trying to import a image using the url method in a css/sass file the path no longer resolves to include the public directory using the prefix
/
Did you try recovering your dependencies?
Yes
Which terms did you search for in User Guide?
Environment
Steps to reproduce
Expected behavior
Prior to upgrading to react-scripts@latest version 3.4.3 resolved images referenced in css files to include the public directory.
Actual behavior
The text was updated successfully, but these errors were encountered: