I have updated sveltekit from 1.0.0-287 to 1.0.0-295, and since then nested folder routes cannot be resolved (page not found).
The following file structure works fine...
src
|__routes
|__pagename.svelte
But nested folder routes cannot be found...
src
|__routes
|__pagename
|__index.svelte
Edit: picture added
Found the source of the problem.
In my routes folder I have [...path] folder containing svelte component which renders custom "Page not found" page. Typically, if I route to a non-existent page, it should redirect to the [...path] folder ("not found" page). At least it worked this way before an update. Now, sveltekit redirects all my routes to this folder. Apparently, after an update, something got changed.
Related
In my React Application, I have certain images and logos inside public -> assets folder.
I have several Routes in the application and whenever I inspect sources in the Chrome developer tools, I see the assets folder does not load/appear for certain Routes.
E.g.
Route 1:
Route exact path="/myApp/sign-out" component={SignOut} -
for routes having only two slashes, the assets folder and my logos load.
Route 2:
Route exact path="/myApp/home/accounts" component={Accounts} -
for routes having more than two slashes (if you observe the route
closely) - the assets folder does not load.
I have spent some time on this issue - The route difference may not even be the cause, but this is what I have observed.
Edit:
This is not an import issue / or a import path issue. I have verified the paths.
Moreover - the assets folder itself does not load under certain Routes (Observed under sources tab in the chrome dev tools). That is the main issue
Any help appreciated.
It is a path issue. If you’re putting them in public, the URL will be different depending on the route path.
I have the following url:
/job/engineer_123456/edit/abcde
Now when I run my local server: npm run dev ("next src/") then when i go to that link it works. However when I deploy my project (to firebase) then I get a 404 from that url.
I have a feeling there is a clash in the routing as my NextJS page directory structure looks like this /job is under pages):
Could it be that on production for some reason, when I go to that link, i am going to /job/[job].js instead of /job/[job]/edit/[editId].js
I am really confused why production shows a 404 page but locally it works.
According to the documentation:
Predefined routes take precedence over dynamic routes, and dynamic routes over catch all routes. Take a look at the following examples:
pages/post/create.js - Will match /post/create
pages/post/[pid].js - Will match /post/1, /post/abc, etc. But not /post/create
pages/post/[...slug].js - Will match /post/1/2, /post/a/b/c, etc. But not /post/create, /post/abc
*Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}).
After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.*
So, you need to have something like:
pages - folder
job - folder
[...slug] - folder
- index.js
edit - folder
- index.js
the slug folder will act as a "template" for all /job/[slug] routes which will have an index.js and also an edit page
The problem: When i go to any internal root, and press f5, it broke, givin 404. Like for example:
https://josuevalrob.github.io/jeval-web/sign-in. But if I go to the root it works fine: https://josuevalrob.github.io/jeval-web
I don't know how to solve this problem. There is a bunch of documentation about this, and I cant handle it.
This is the github repo: https://github.com/josuevalrob/jeval-web
This is the github Page: https://josuevalrob.github.io/jeval-web
And you can see, the package json have the home key:
"homepage": "https://josuevalrob.github.io/jeval-web",
Also the .env is currently empty, but i can add this:
PUBLIC_URL = "https://josuevalrob.github.io/jeval-web"
Nevertheless, it doesn't work.
I had added the homepage or the public_url, neither work.
Github pages doesn't really support single page applications. Single page applications require a server that serves the same page at every url and then the client renders the appropriate content based on the url. Hence the "single page". Github does not allow you to run server side code, so you can't write a server to serve your index.html at every route.
There is, however, a hack you can use to make this work. When you navigate to a route other than the root url, Github will serve a 404 page as you can see. Github allows you to customize this 404 page. So, you can make the custom 404 page your single page application and then it will be served at every route as required.
This repo explains the required steps to serve your single page as a custom 404 page on Github pages.
Basically it amounts to...
Copy this 404.html page to your repo as is
Add this redirect script to your index.html page
The only drawback is that the url is forced to redirect and quickly flashes the incorrect URL before redirecting. You can see an example of this by refreshing this page. If you want to avoid this, you need to look for hosting somewhere else that allows you to edit server side code and serve your index.html at every route
I had a similar issue with react app. I fixed it by using HashRouter instead of BrowserRouter in App component
I'm creating a simply lightbox with create-react-app and I found one big issue that is bringing me some problems. I have in public folder some images. In root public folder I have spinner file Spinner-white.svg and I'm creating gallery on page localhost:3000/other When I am on this page all images that I want to add must be in folder /other but I'm using this Spinner somewhere else and I don't want to copy it on every folder that match my route path. localhost:3000/other2 for this path I need to create other folder /other2 and paste Spinner here.
I fixed this issue on production version but I cannot find answer in development.
Fixing for production:
{
id: 1,
url: process.env.PUBLIC_URL + '/other/3.jpg'
}
and in client package.json
"homepage": "path_to_domain",
Screen of my network tab:
Hope you are doing well.
For your issue, you have to introduce the base path in .env file.
With help of base path, your case to access the spinner wherever you want.
Hope it will help you.
create-react-app build with PUBLIC_URL
I am keeping images in a folder public/assets/img. Then I use it in a component like that:
const imageUrl = "/assets/img/image.png"
Locally everything works fine, but on GitHub Pages in an image URL somehow name of my repo is missing, so instead of
http://name.github.io/my-repo/assets/img/image.png I get http://name.github.io/assets/img/image.png
I was following an instruction on how to create a GitHub Pages build and added in package.json the URL of my project, namely "homepage": "https://name.github.io/my-repo"
-- edit --
Also, I've just now realized, that although the routing seems to work fine, it also misses my repository name in the URL, so instead of
http://name.github.io/my-repo/subpage there is
http://name.github.io/subpage
What am I missing here?
OK, so I somehow have solved my problems, however, I am not quite satisfied with the solutions:
Fixing the URL problem (missing repo name in the URL)
I've added a basename property to my router <BrowserRouter basename="/repo-name">
Downsides: Firstly, it doesn't look good hardcoded. Secondly, npm start opens localhost:3000 which is empty now. I have to add my repo name to open the app locally, so localhost:3000/repo-name - not too neat.
Fixing images problem (also missing repo name in the URL and thus not displaying images)
I've added a process.env.PUBLIC_URL variable to the image URL: const imageUrl = ${process.env.PUBLIC_URL}/assets/img/image.png. In local environment it's empty, deployed it takes homepage value from package.json, which is https://name.github.io/repo-name
Downside: one has to add process.env.PUBLIC_URL before every image displayed in a component.
I would be grateful for any better solution!