Server api nested index.js file is not detected
Hello there, I am quite new with Nuxt and this is my first post here, so I apologise if anything is incorrect!
I have done a lot of searching and tried a bunch of solutions suggested by chatGPT without success.
I am working on a Nuxt server api, in which I am having a strange problem.
Right now I am working on a route, with the following folder structure.
server
- api
- projects
- [id].js
- index.js
- [projectId]
- pebbles
- index.js
This results in the following route for my requests: api/projects/:projectId/pebbles.
In the index.js file I have written code for handling GET and POST requests to the route, and everything works wonderfully.
Now I am however trying to add a new file to the pebbles directory, and whenever the file I add is alphabetically ordered BEFORE index.js, the previously working route is no longer being found.
Initially this came up as I was trying to add a [pebbleId].js file to handle PUT and DELETE requests, but the same error came with names such as abc.js etc.
I have both tried adding code for handling in the files as well as just adding completely empty .js files, with the same result.
If I named the new file x.js (alphabetically after index.js), the firstly mentioned GET request works again.
Have I fundamentally misunderstood something or is something strange going on here?4 Replies
Hi @Crook. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, it appears that there might be an issue with how Nuxt is scanning and registering server routes in nested directories. Let's address your question and provide some insights.
The behavior you're experiencing, where adding a file alphabetically before
index.js causes the route to stop working, is not the expected behavior in Nuxt 3. However, there have been some recent changes and fixes related to how Nuxt handles server routes and file scanning.
Here are some relevant points:
1. According to the Docs > Guide > Directory-structure > server, Nuxt automatically scans files inside the server/ directory to register API and server handlers. Your structure of server/api/projects/[projectId]/pebbles/index.js should be valid and work as expected.
2. There was a recent fix related to the order of resolving router options files, as mentioned in this GitHub pull request. While this doesn't directly address your issue, it shows that file ordering can sometimes affect route resolution.
3. The Docs > Getting-started > Upgrade Guide > Directory index scanning mentions that child folders in the middleware/ folder are now scanned for index files. This change was made to make behavior consistent between scanned directories. However, this shouldn't affect your api folder structure.
Given the information available, it's difficult to pinpoint the exact cause of your issue. The behavior you're experiencing is not standard and might be a bug or an unintended side effect of recent changes.
Here are some suggestions:
1. Make sure you're using the latest version of Nuxt 3.
2. Try creating a minimal reproduction of the issue and report it on the Nuxt GitHub repository.
3. As a workaround, you could try using explicit file naming for your routes instead of relying on index.js. For example, you could name your file pebbles.get.js for GET requests and pebbles.post.js for POST requests.
4. If possible, consider flattening your route structure or using a different naming convention that doesn't rely on the alphabetical order of files.
If the issue persists, it would be best to create a minimal reproduction and seek further assistance from the Nuxt community or by opening an issue on the Nuxt GitHub repository. The behavior you're experiencing is not standard and might need further investigation by the Nuxt team.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@156893255303168000> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
While the AI answer is nice, it did not suggest anything that I have not already looked at, so I would appreciate if anyone is able to spot a flaw in my structure etc.
For future readers, I think I may have figured this out.
In my structure, I had two dynamic route params, one for the projectId and one for the pebbleId.
When I made the projects directory, i made a index.js and a [id].js file within.
Then I needed nested routes, and added a [projectId] directory, in which I added the pebbles stuff.
It seems that somehow, the naming of the [id].js file, created a conflict.
I renamed the [id].js file in my projects folder, to [projectId].js, so it matched the name of the sibling folder.
Now in my pebbles directory, I have index.js and [pebbleId].js and both seem to work.
I'm not 100% certain that I'm correct about this, but it seems that the missmatch of the file and directory for the project, was causing problems for the dynamic routes nested beneath it.
Will avoid using generic name like [id] in the future and always name the dynamic file and potential dynamic subfolder the same.
If I understand correctly I think you need to restructure to:
I don't think you can have multiple
[variable] entries on the same level