Invalid route module file: /....../app/routes/.DS_Store

[kentcdodds]

Any time I open my app in the file system, Apple does this stupid thing and creates a .DS_Store file. Could we just ignore .DS_Store files in the routes?

[jacob-ebey]

I'd like to ignore all "." files once we add file name escaping. This will make editors live VIM happy when they use tmp files.

[georgehenderson]

Just ran into this one, ignore dot files would be nice

[stefensuhat]

any temp solution for this one? need to remove it everyday to run remix dev

[kentcdodds]

You could apply #668 manually via https://npm.im/patch-package

[rzmz]

Kind of related: I get the same error message when I want to (co)locate my css files not in a separate /styles folder but right where the route is defined. So for an example index.tsx has file index.css in the same folder. Is this something that is considered going against a convention and should I move all my css files out from the app/routes directory?

[kentcdodds]

Yes. Every file in the routes directory is considered a route. So you need to move CSS files outside the routes

[fsteenkamp]

Would be great to be able to specify a file pattern to ignore, currently can't use Rescript .res files in the routes directory, they transpile to .js on the spot :)

[MichaelDeBoey]

Fixed by #988

[kentcdodds]

Not quite. #989 will address @Ferdzzzzzzzz's use case though.

[hedwiggggg]

Would be great to be able to specify a file pattern to ignore, currently can't use Rescript .res files in the routes directory, they transpile to .js on the spot :)

Wouldn't it make more sense to define the opposite? So a pattern to include and not to ignore?

Like Next.js's Custom Page Extension (https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions), found it quite useful.

[kentcdodds]

Our hope is that people don't go hog-wild in the routes directory and start putting a bunch of stuff in there. We want to encourage people to keep the routes directory clean. An opt-out will encourage that more than an opt-in will.

[Saidfatah]

@kentcdodds I just faced this what's the workaround , other than removing he file every time I try to run my project?

[kentcdodds]

Wait a few hours. We'll have a release out today :)

[ronb1982]

@kentcdodds Any update on the release? I'm getting the same invalid route module .DS_Store error when I run npm run dev.

[kentcdodds]

I forgot to document this! Sorry. Check this out: https://github.com/remix-run/remix/pull/989/files#diff-852e3f3cc491a6fcc66706c94417be59f4c12569e0f367354613bfc103df7b38R92

[alexsinfarosa]

I tried to remove the .DS_Store files manually from the /routes directory, without success. This worked: find . -name ".DS_Store" -print -delete

[dalelotts]

https://remix.run/docs/en/v1/tutorials/jokes#styling says

You can put your CSS files anywhere you like within the app directory.

Except you cannot put it anywhere you like. You cannot put it in the /routes directory. smh.

rant I'm disappointed to see this "package by type" convention still happening more than 20 years after most developers decided it was a bad idea - it's like saying all Blondes must live in the same apartment 🤦‍♂️

Ideally everyone that is closely connected would live in the same apartment (folder) - e.g. route, component, and css should all live together because they are closely connected. Complete strangers should live in different apartments - e.g unrelated routes, css, components, etc should be in different folders.

I'd much rather see any file named *.__route.js is considered a route no matter where it is in the /app folder. /rant

[kentcdodds]

Except you cannot put it anywhere you like. You cannot put it in the /routes directory. smh.

Actually, this is not true, but it's not your fault you didn't know that. I just merged a docs PR to fix this: https://github.com/remix-run/remix/pull/1671

You can use ignoredRouteFiles in your Remix config to ignore any pattern you like (including *.css).

So yes, please do colocate your stuff. This issue is closed (the create-remix CLI generates config that ignore dotfiles by default).

Thanks!

[pmlk]

Maybe this is the wrong place, but since I tried to tackle my problem with ignoredRouteFiles I figure someone else might think the same thing and come across this issue/thread.

I'm testing my remix app with jest and I'm placing my test files alongside the route files, e.g.:

/routes/index.tsx
/routes/index.test.tsx

Unfortunately, this causes an error when I open any page: ReferenceError: describe is not defined.

Since the documentation for ignoredRouteFiles states the following

This is useful for ignoring dotfiles [...] or CSS/test files you wish to colocate.

I figured setting ignoredRouteFiles: [".*", "*.test.tsx"], would solve my problem. But it seems that it does not.

What am I doing wrong or misunderstanding here? :)

[mennopruijssers]

@pmlk I had to use **/*.test.* for it to work!

[pmlk]

I had to use **/*.test.* for it to work!

Works great! Thanks so much, @mennopruijssers!

[mateosantosdev]

Yes. Every file in the routes directory is considered a route. So you need to move CSS files outside the routes

This solves my day :D