Index not found : repo stored in sub-folder

Support
1

Hi,

I have an issue that seems trivial yet causing me a lot of struggle…

I’ve recently deployed an other app with Netlify which systematically leads to an error 404 right from the bat even though I have an index.html file. The project does run perfectly well on my local computer
Netlify Internal ID: 01HTJXQWEW1EEA3J0ER1VEG955

I believe I found the answer to my problem on this page

On this particular quote :

  1. Incorrect publish directory: If someone is trying to deploy their site directly, without any build step, a common scenario we’ve noticed is that, they upload their site to a git repo and place all the files inside a sub-folder. However, when connecting the site to Netlify, due to lack of framework, we leave the responsibility of configuring the correct settings to the user and some users don’t configure the publish directory. Thus, when they visit their site, they see a 404, as the files actually live inside https://their-site.netlify.app/sub-folder. In this case, either move all your files outside the sub-folder or change the publish directory in Netlify Site settings.

Actually my whole project is indeed inside a sub-folder called ‘wild-oasis’

I tried the solution one by moving all the subfolders up to the parent branch but then it leads to multiple errors I cant resolve. So, I wanted to have the folder ‘wild-oasis’ be the parent folder.

I setted up the configuration like this but still wont work (I also tried /wild-oasis with the slash since I wasnt sure if it had to be included or not, wont work)

image
image1083×576 31.9 KB

Any help would be appreciated, thank you

2

You don’t need to set the Package directory.

Your project doesn’t build locally. As it doesn’t build locally it won’t build on Netlify. This would explain your statement

Run npm run build on your development machine. Address any error before trying to build on Netlify.

3

image
image1393×443 52.4 KB

I don’t see any error on my machine on the normal or the browser

4

You are running in development mode. Try building like I suggested.

5

Sorry I didnt notice

I don’t see any errors tho ?

image
image951×283 14.8 KB

6

I do. Do you see errors in the build log on Netlify?

Screenshot 2024-04-04 at 10.26.30
Screenshot 2024-04-04 at 10.26.301980×706 293 KB

The important one here is

Error: [vite]: Rollup failed to resolve import "react-router-dom" from "/[path-to-project]/WildOasis/wild-oasis/src/App.jsx".
7

I saw the error regarding react-router-dom previously but I see atm is about styled-components package

7:07:25 PM: Error: [vite]: Rollup failed to resolve import “styled-components” from “/opt/build/repo/wild-oasis/src/ui/ErrorFallback.jsx”.
7:07:25 PM: This is most likely unintended because it can break your application at runtime.
7:07:25 PM: If you do want to externalize this module explicitly add it to
7:07:25 PM: build.rollupOptions.external
7:07:25 PM: at viteWarn (file:///opt/build/repo/wild-oasis/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:67190:27)
7:07:25 PM: at onwarn (file:///opt/build/repo/wild-oasis/node_modules/@vitejs/plugin-react/dist/index.mjs:250:9)
7:07:25 PM: at onRollupWarning (file:///opt/build/repo/wild-oasis/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:67215:9)
7:07:25 PM: at onwarn (file:///opt/build/repo/wild-oasis/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:66922:13)
7:07:25 PM: at file:///opt/build/repo/wild-oasis/node_modules/rollup/dist/es/shared/node-entry.js:18303:13
7:07:25 PM: at Object.logger [as onLog] (file:///opt/build/repo/wild-oasis/node_modules/rollup/dist/es/shared/node-entry.js:19950:9)
7:07:25 PM: at ModuleLoader.handleInvalidResolvedId (file:///opt/build/repo/wild-oasis/node_modules/rollup/dist/es/shared/node-entry.js:18893:26)
7:07:25 PM: at file:///opt/build/repo/wild-oasis/node_modules/rollup/dist/es/shared/node-entry.js:18851:26

Cant tell how to solve it

8

You are importing dependencies that are not defined in the package.json.

9

image

I see it in my file

10

You updated that a minute ago. It wasn’t there when you posted originally. Now check all the other imports are there too (e.g. react-router-dom)

11

Sorry again, I believed I tried adding the packages outside wild-oasis folder where the package.json so nothing much happened and I tought I already had it after git status didnt change anything.

In any case, I do believe now I have all the packages including react-router dom…?
image

Its also pushed, but the netlify deploy log still cant import react-router dom

12

Are you sure of that?

This is what GitHub shows is currently in your package.json (which is also what Netlify would see):

13

Hi,
Yeah I noticed I installed all this in an other instance of WildOasis, I’ve did a cloned of a previous version and Im getting mixxed up…I canceled the deployment on netlify and tried an other one on the repo where I actually add all the packages

I’m now linking on this git repo

on a new deployment

Now the deployment does seems to work witheout any errors but it leads to a blank page with this following error on the console
image

Edit : I saw you answered a post with a similar error and you suggested to set the build settings

But not sure if its related or how to set my build settings. Except if I refer to the img on netlify’s doc

14

@Nostalgeek18 As per the other thread that you’ve linked, that error is often seen when people link a repository, don’t configure their Build settings correctly, and then Netlify either doesn’t perform their build (or does) but ultimately deploys the root which is their source code.

I can’t check if that’s what’s happening for you though, as you’ve not linked to your site.

An easy way to check is to see if you can access the /package.json route.

The fix usually is just setting your Build settings correctly.

Make sure Netlify starts in the right place (Base directory), runs the right thing (Build command), and then deploys the right folder (Publish directory).

15

Link to the site is : https://main--wild-oasizs.netlify.app/

I tried setting the Build settings to ‘npm run build’ I kept the base directory as default settings. Im a little clueless to regarding the publish directory too. Right now the input is blank, should I set it to public folder ?

16

@Nostalgeek18 See:
https://main–wild-oasizs.netlify.app/package.json

^ That indicates you’ve deployed your source files.

The Publish directory should be set to whatever directory your project builds into.

An easy way to determine this is to run your build locally and see what it says, (frequently they say where they’ve output), or you can alternatively then look at the project and see what was created.

Based on everything you mentioned earlier in this thread, I’d expect you want it to be dist.

However your current repository is failing to build for me due to another missing dependency:

image
image1611×273 85 KB

17

image
image764×230 8.56 KB

So publish directory should be “dist” ?

I’ve added the react-hook-form package

18

Yes, you can see it in your screenshot:

image

It’s building the production files into dist/

19

My new config setting :

image
image982×584 34.5 KB

I seem to receive the same error message on Building phase on my end :
11:30:32 PM: > vite build
11:30:32 PM: /opt/build/repo/node_modules/rollup/dist/native.js:87
11:30:32 PM: throw new Error(
11:30:32 PM: ^
11:30:32 PM: Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try npm i again after removing both package-lock.json and node_modules directory.

=========

I should try deleting the whole package-lock.json file and node_modules directory and install npm again ? as suggested

20

@Nostalgeek18 I also received that error earlier when testing your new repository, I did as it instructs (delete the package-lock.json file and node_modules directory and try again).

Once you’ve done that, you would need to push the new package-lock.json file that it generates to your repository so the same issue doesn’t happen on Netlify.