I have a reactJS SSR app deployed into server, I am trying to use one of the page /listpage as a widget into some other website
The list page is appearing nicely in other website however some of the click actions were not working, when I debugged it I found that the issue was with serving reactjs static js chunk files which were created by react run build. The issue was with relative path /static/js/xxxx
to fix this issue, one solution is to have a full path reference, to enable that I added homepage:"" in package.json
this worked and when I checked network tab in chrome browser i could see all static js files are referred using full path.
however a strange issue occurred , the whole list widget appears and suddenly disappears , when I inspect the elements I could see nothing inside thats where all react components suppose to be rendered.
for full code of SSR project kindly refer with explanation.
however the full code is in github
Related
I made a React app with Vite for my portfolio. There I have buttons that change the image of my known skills when i click them. I have implemented this locally using useState. My website works correctly locally and the images load correctly. But when I build it for production only the images that I have imported as components and added load, but the images in the skills section do not load. I have identified the issue to be that the image path does not translate to the production build directory structure after build so the images are not found. But i dont know how to fix this.
Here is my github repo : https://github.com/coderboy53/portfolio
Putting the images under public folder should solve the issue
You can keep the images under public/images
I had a really interesting debugging experience last night so I thought I'd share
On gatsby#4.4 + gatsby-plugin-image#2.4 + Netlify (may not matter) I noticed that I was not able to see GatsbyImage components under these specific circumstances:
only on initial load (hitting a nav button rendered the images)
only on desktop and on Chrome
only in prod (Images were loading perfectly in localhost after running gatsby develop )
The issue for me was that when I migrated from v2 to v4 and swapped out gatsby-image to the recommended gatsby-plugin-image, I forgot to add it to gatsby-config. For whatever reason, using {GatsbyImage} from the newer gatsby-plugin-image does not throw any errors even if you don't add it to gatsby-config. Not only that, the dev preview in localhost will show images rendering perfectly.
To make things even more confusing, {StaticImage} appears to NOT work if the plugin is not loaded in config and Gatsby will correctly tell you that something is wrong.
Anyways, my takeaway is.. always check that all plugins are added to config because in certain cases there is no error handling for that. And always check out dev AND prod builds before pushing code!
yesterday I wanted to create a landingpage for a subcategory if my website. The site it build with create react app. I created the sub-page using react router. On lokal machine everything works fine.
But after I deployed it on AWS (amplify) the included fonts in the whole app (old site and new one) are not working anymore.
I am getting the "Failed to decode downloaded font: " and "OTS parsing error: invalid version tag" errors.
I didn't changes anything in the index.scss/index.html files.
After I`m running the build command the fonts-files are in the right folder ...
This is how my index.scss looks like:
#font-face {
font-family: "SF Compact Display";
src: url("./assets/fonts/SF-Compact-Display-Regular.otf");
}
#font-face {
font-family: "SF Compact Display Semi";
src: url("./assets/fonts/SF-Compact-Display-Semibold.otf");
}
I also tried it with absolute path :
enter code here src: url("assets/fonts/SF-Compact-Display-Semibold.otf");
But it doesn't work.
I imported the index.scss into my index.tsx import './index.scss'
Both files are living in the src root.
I have read lots of other stories that are similar to my problem. But nothing works.
Does anyone have a guess why I am getting this problem? Is there maybe a redirecting issue with aws as this is the only think which I changed?
(as i said before I included the react router the fonts where working fine ). I also tried to remove the react router and get the old page with the right fonts. But now I have the same issue there.
On aws rewrites I included </^[^.]+$|\.(?!(css|gif|ico|json|jpg|js|png|txt|svg|woff|ttf|otf)$)([^.]+$)/> with /index.html and 200 Rewrite.
Im trying to fix it for hours now, but I don't have any clue what the issue could be.
I hope anyone had the same issue in the past and can help me.
Bests
Not sure if you already solved this, but here're some thoughts to help.
The Failed to decode downloaded font error is almost certainly because the app responded to the browser's request for the font with html. This would likely happen if there's a catch-all route configured for the SPA (e.g. respond with the root index page or a not-found page).
From the info you've shared, the most likely issue is that the relative path to the font files is being broken in the build process. The key insight here is that url("assets/fonts/SF-Compact-Display-Semibold.otf"); isn't actually an absolute path because it's missing the / prefix. If your build's putting the font file in /assets/fonts/SF-Compact-Display-Semibold.otf, what you want is: url("/assets/fonts/SF-Compact-Display-Semibold.otf");.
A useful way to check the directory structure produced by building is to run npm run build (see https://create-react-app.dev/docs/production-build/). This produces a production build in a directory called build. When creating an AWS Amplify project, it automatically sets up running the build process for you (see https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html). By default, for create react app apps, this means it'll do npm run build prior to deploy.
I am starting to help someone with a new project. This project is React (React Native as is a mobile app).
The project is working fine on her laptop (in her browser), and when I scan the Expo QR code, the app works fine on my Android device.
However, trying to run it in my browser is throwing all these errors:
The 'Can't resolve' error doesn't make sense, because the correct react native files are there. Is this a cache problem? I have tried deleting the .expo/web/cache folder and starting over.
Also, why are there multiple errors in my console, but only one being shown in the information on the actual web page? Does this mean that the single error being shown is causing all the other errors, or it is the only one which needs fixing, or will it show the next error when I fix the one that is being shown?
Thanks
Seems to have been a known problem re babel. See the links below:
https://github.com/babel/babel-loader/issues/173
how to solve this error You may need an appropriate loader to handle this file type
I wrote a small AngularJS app that seems to run fine everywhere except in Safari (iOS) where I only see a blank page. If I hook up the phone to my mac and run Web Inspector I can see that there are no javascript errors (in fact the app runs fine and by looking at the DOM I see that scope variables are properly evaluated and replaced in the templates). What I DO see are many CSS errors. If I remove the offending CSS styles (Bootstrap 3) the errors go away yet the page remains blank. I tried removing all CSS and most trivial JS libs to no avail.
I'm using the following JS/CSS (in order of appearance on index.html):
bootstrap.min.css (v3.3.6)
bootstrap-theme.min.css (v3.3.6)
app.css (my own stylesheet which literally has two trivial style definitions)
angular.js (v1.4.9)
angular-route.js (v1.4.9)
ui-bootstrap.js (v1.1.2)
ui-bootstrap-tpls.js (v1.1.2)
lodash.js (v4.5.0)
moment.js (v2.11.2)
app.js (my own app)
Backend: Node 0.10 (running on a free OpenShift account) with Express v4. Files are served via the static middleware. No manual uploading is being done; deployment happens straight from the git repo after doing a push.
EDIT: Completely removed all CSS but problem persists. App fully works everywhere and still showing a blank screen on Safari iOS.