I'm working on it as a react and running the bundled file as webpack-dev-server.
The problem I have is, For example..
/jkdlfjq
If you enter it in the address window, history ApiFallback of webpack will find my original index.html address.
but,
(meaningless address)
/jkdlfjq/djfiqjifq
/djqoife/qjeifoqjef/qjeifojf
/qjeif/dd/qqq/kk
If you put "/" on it, it makes the same error as the picture above.
I looked up all the settings on webpack, but I couldn't find solution because of my search skills.
Is there a sweet guy who can give me a hint?
Related
So the changes made before having this issue are upgrading to webpack 5 and changing AWS EC2 instances. So I checked Nginx config and webpack config files and didn't notice anything wrong. If open a new browser tab and enter the CSS file link, I am able to get the CSS file but occasionally need to fetch the 2nd or 3rd time to get the file. When the website loads, the CSS file seems not be able to loaded at the same time. In the HTMLWebpackPlugin, I have set the scriptLoading as 'blocking'. Any idea how to debug and fix this issue? Another questions, only webpack generated js and CSS file has load issue, the other files like flexbox.min.css has no issue to load.
Update: I downgraded to using webpack4 and this issue is gone. If anyone has an idea or knows any configuration regarding this, please please let me know.
Thanks
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'm working on two React projects.
In both projects, the manifest.json file is set up correctly and The serviceworker is also registered.
In one of the projects, the question of adding to the home screen is not asked.
From the research I've done, I've found that a project that doesn't work properly can't find a file in .license format, but in a project that works properly, it's a file with a .license.txt format.
What makes the difference between the two files when it is taken from the building project? How can this problem be solved?
Photo of the project that works properly and displays the install app prompt
The project photo does not work properly and does not show the install app prompt
error message in console
Finally I found the solution to the problem. If you have ejected the project, you can add a field called extractComments with a false value in the webpack.config.js file in the TerserPlugin section. If you have not ejected the project, you can solve this problem by creating a webpack.config.js file and adding the Terser module with the default settings and adding the extractComments field with a false value. The following links may be helpful in understanding and resolving the issue.
license-to-kill-your-PWA
terser-plugin
I am currently looking into React, React-habitat, and Webpack.
My question is does Webpack also bundle the index.html file where I reference the bundle or is this kept separate? Is it possible to exclude this without specifically stating this in the Webpack config file?
this is the current structure am envisioning.
https://imgur.com/a/98or9
I know that all the dependencies found in my entry file for Webpack are bundled. The reason I would like to know this is because I am doing some research on how a CMS can be built around the three topics I mentioned above. I need to know if the index.html file is also bundled or not because I would like to edit the original index file(if it is not bundled) instead of repackaging everything for every change.
Hope someone understands what am looking for.
Recently, I downloaded mern.io. The nice thing is they have bundled everything for me. But I am kind of lost. In my last project whenever I changed something on client I could refresh browser and see the changes. With MERN I always see:
webpack building...
webpack built e9c15d7d435381a63771 in 1043ms
At first it was replacing the code on client. Now, I can't make it to propagate changes any more.
Maybe it's an issue with https://github.com/gaearon/react-hot-loader
What am I missing?
Do I have to clean the webpack or caches somehow?
EDIT
The config files can be seen here: https://github.com/Hashnode/mern-starter
The webpack ones are webpack.config.*.js
EDIT 2
The computer restart helped me but only for the first load of the page. I have found this message in the console:
XMLHttpRequest cannot load http://0.0.0.0:8000/50d9888579520587227e.hot-update.json
Which led me here: https://github.com/gaearon/react-hot-loader/issues/56