When I get under a subdirectory in react router index.html links and scripts fail to load.
:1 Refused to apply style from 'http://localhost:3000/solutions/css/default.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
When i'm in /foo routes, its fine.. But when I get under /foo/foo, I get this error. This route for example is /solutions/home. In the console error it get to /solutions and then from there tries to import scrs from index.html.. Am i missing something?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" sizes="16x16" />
<meta
name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="css/default.css" />
<link rel="stylesheet" href="css/component.css" />
<title>Neuroelectrics</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
It was an easy one.. after thinking and trying to debug a lot about React and React router, I realized that it was nothing with it (dumb), just added %PUBLIC_URL% to all linking files. The problem was that with react router index.html was trying to fetch these files under the router routes.
Related
There's a problem with Vite and React when having dynamic routes (list/:id). Only on dev.
Using vite dev server with --build option enabled:
vite:html-fallback Not rewriting GET /list/src/index.tsx because the path includes a dot (.) character. +47ms
However this should be fixed by adding plugin: https://github.com/vitejs/vite/issues/2245
vite.config.js:
plugins: [
react(),
{
...pluginRewriteAll(),
}
],
But it's not in my case.
Sorry I couldn't find it earlier somehow, but here's the solution.
Original answer -> Getting "404 not found" when refreshing a page that has a nested route, because Vite doesn't redirect all routes to index.html
Add <base href="/" /> tag inside HTML file <head> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<meta name="description" content="My App" />
<title>My App</title>
<base href="/" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="src/index.tsx"></script>
<div id="root"></div>
</body>
</html>
For my React-website, I need to document all the packages I am using.
For this, I want to use webpack-license-plugin (https://www.npmjs.com/package/webpack-license-plugin)
However, I recently switched to using "create-react-app" which means there is no config-file I can directly modify.
I tried to follow this answer (create react app Configuration file after build app) which tells me to create a config-file, use the plugin there and load it in my index.html-file.
I would have expected when running the build somehow the inside config-file by me specified output-file would appear inside the build-folder, BUT there is nothing.
I did not find any other guidance, other than this question (Customize webpack plugins using create-react-app). However, I would like to avoid making use of new tools, if possible.
Generally, I just wonder about the simplest way how to achieve what I set out to do. Thanks for any help!
Here is the content of the extra config-file I added to my public folder (beside the index.html):
const LicensePlugin = require("webpack-license-plugin")
module.exports = {
plugins: [
// there might be other plugins here
new LicensePlugin({ outputFilename: "thirdPartyNotice.json" })
]
}
And here is the content of my index.html:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Cardo&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="%PUBLIC_URL%/config.js" type="text/javascript"></script>
<div id="root"></div>
</body>
</html>```
here's the link to my GH page
https://filipdimko11.github.io/crypto-tracker/
When running it locally, the project renders everything. After hosting it on GH pages, though, the website doesn't render anything (no errors in the console either).
I tried making an empty commit, saw it as another solution on StackOverflow, but that didn't fix it. Using ReactJS, thanks.
The problem is because in your index.html file you are referencing your assets like /static/js/main.2227a53b.js which makes sense when you are running locally.
But when you deploy to github pages, the directory structure is different. To make it work properly you'd need the routes to be prefixed with crypto-tracker/ For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<meta name="description" content="Your best crypto tracker!" />
<link rel="manifest" href="/manifest.json" />
<title>Crypto Tracker</title>
<script defer="defer" src="crypto-tracker/static/js/main.2227a53b.js"></script>
<link href="crypto-tracker/static/css/main.f53fb378.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Depending on what build tool you are using, this is probably configurable.
I am converting an existing bootstrap theme to react js. Having copied the required folders (css, fonts, images, and js) into react public folder, and add the link to each files into public/index.html file as seen below;
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="%PUBLIC_URL%/fonts/flaticon/flaticon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/fonts/font-awesome/fontawesome.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/vendor/slick.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/custom/main.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/custom/index.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="%PUBLIC_URL%/js/vendor/jquery-1.12.4.min.js"></script>
<script src="%PUBLIC_URL%/js/vendor/popper.min.js"></script>
<script src="%PUBLIC_URL%/js/vendor/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/js/vendor/slick.min.js"></script>
<script src="%PUBLIC_URL%/js/custom/slick.js"></script>
<script src="%PUBLIC_URL%/js/custom/main.js"></script>
</body>
</html>
It appears that the css files in the head session work correctly except for the js files in the body session. After inspecting the page for error via browser, i found this..
DevTools failed to load source map: Could not load content for http://localhost:3000/css/vendor/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://localhost:3000/js/vendor/popper.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://localhost:3000/js/vendor/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
How can i fix this as nothing seem to be working after several attempt including disable/enable javascript/css from browser inspect -> settings (gear) as well as using npm install bootstrap jquery popper.js
Favicon not showing up when running my React project. However, when I click index.html, the icon appears. When I call npm start, when localhost opens I see my pages without icons. I tried every way and even though I made many changes, I could not reach the result. I will be glad if you help.
The file structure of my project is as follows.
file structure
and index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Trying Project</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Clear the cache in your browser, this should fix the issue.
Your icons should be in public folder. For importing correctly you have to start all your paths with "%PUBLIC_URL%/myIcon.ico" and this "%PUBLIC_URL%" will be resolved into public folder (where your index.html is placed by default).
(inside index.html on public folder)
exemple: <link rel="icon" href="%PUBLIC_URL%/logo.png" />
Just add version parameter for the favicon path to force your browser to refresh the pic
<link rel="icon" href="favicon.ico?v=2" />
Then you can delete it, the icon will remain.