[Docs]: Officially recommended cookies.server.ts file naming throwing a Vite Build Error -- change docs

[churbis]

Describe what's incorrect/missing in the documentation

The official docs say to keep the cookies in a cookies.server.ts here.

However, sometimes the vite build process flips out (for reasons I don't fully understand) and throws a [vite] Internal server error: Server-only module referenced by client when you have a <modulename>.server import in a route with a default export of a component (the component can be empty).

[churbis]

Ok figured it out -- if you don't use your <module>.server.ts imports in a loader, header, or action react-router's vite plugin assumes that you must be using it in your default export (React Component) and doesn't strip the import out.

The error sends you to https://remix.run/docs/en/main/discussion/server-vs-client (which doesn't mention that the imports need to be used in the server methods in order to be stripped, possibly because it was written before moving to the react-router v7 plugin method?

So, this might be more of a docs + error message update after all.

It would also be nice if the <module.server.ts imports were stripped as long as they weren't actually depended on by the components or code exported to the client but, that's definitely not a "docs request" haha.

[taichi221228]

I also ran into this bug. As far as I can tell, there are two ways to implement .server modules:

1. Name your files *.server.ts?(x)
2. Place the modules in a .server directory

I’ve confirmed that this issue only occurs with the first approach. For now, using the second approach works around the problem and allows the build to complete successfully.

[ivogt]

For anyone encountering this error during migration to RR7 from Remix you should keep in mind that loaders/actions are only stripped from the client code if you define the files in the routes.ts. So, while you are migrating routes that are not defined in routes.ts will error if they import .server files.

In our case we initially reduced the routes.ts to just one route while the root.tsx/layouts was importing some resources that also had loader/actions. It's easy to miss that and start thinking the the .server files are not stripped.

As rule of thumb - register all your routes in routes.ts first while doing migration to avoid this error.

Example:

1. root.ts imports components from /resource/cookies.tsx route that is supposed to fetch the cookies message with fetcher.
2. /resource/cookie exports Cookie component and loader which uses cookies.server.ts
3. if resource/cookie is not added to routes.ts this will result in server error: Server-only module referenced by client