"npx remix routes" issue with Vite and latest Remix

[bjuretic]

Hello,

it seems that after migrating to Vite (unstable) with latest Remix (2.3.1), with latest remix-flat-routes that npx remix routes does not return the routes detected by this package.

I have a complicated folders structure of routes, and they all work fine in the browser, but calling npx remix routes returns just what it sees with the standard Remix routes lookup system:

<Routes>
  <Route file="root.tsx">
    <Route path="*" file="routes/$.tsx" />
  </Route>
</Routes>

... while the actual routes are (just a sample):

app/routes
├── $.tsx
├── _public+
│   ├── _layout
│   │   ├── FancyFooter.module.css
│   │   ├── FancyFooter.tsx
│   │   ├── layout.module.css
│   │   └── layout.tsx
│   ├── about-us
│   │   ├── ContactIcon.module.css
│   │   ├── ContactIcon.tsx
│   │   ├── _about_us.tsx
│   │   └── about-us.module.css
│   ├── index
│   │   └── page.tsx
│   ├── signin.tsx
├── dashboard
...

All routes work fine in the browser, the issue is only with npx remix routes and Vite in combination.

Just in case it might be useful here is my vite.config.js :

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import { flatRoutes } from "remix-flat-routes";
import tsconfigPaths from "vite-tsconfig-paths";
import mdx from "@mdx-js/rollup";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";

export default defineConfig({
  plugins: [
    remix({
      ignoredRouteFiles: ["**/.*"],
      routes: async (defineRoutes) => {
        return flatRoutes('routes', defineRoutes)
      },
    }),
    tsconfigPaths(),
    mdx({
      remarkPlugins: [
        remarkFrontmatter,
        remarkMdxFrontmatter,
      ]
    })
  ],
});

Thank you in advance for your answers and for your work!

[kiliman]

Your ignoredRouteFiles setting is incorrect. That setting applies to the Remix default convention. You need to specify that all files should be ignored.

ignoredRouteFiles: ["**/*"] // ignore all files (remove the .)

[bjuretic]

Thank you for the reply. I made the change but a new error pops up preventing both npx remix routes from working as well as npm run dev. I tried even having just a single index.tsx route in the routes/ and even an empty routes/ and same thing happens. Returning the ignoredRouteFiles back to standard **/.* fixes the npm run dev startup issue but remix routes returns the same error.

$ npx run dev

> dashboard@0.0.0 dev
> vite dev

error when starting dev server:
Error: Cannot add empty string to PrefixLookupTrie
    at PrefixLookupTrie.add (/Users/xxxx/sources/app/node_modules/@remix-run/dev/dist/config/flat-routes.js:38:23)
    at flatRoutesUniversal (/Users/xxxx/sources/app/node_modules/@remix-run/dev/dist/config/flat-routes.js:141:18)
    at Object.flatRoutes (/Users/xxxx/sources/app/node_modules/@remix-run/dev/dist/config/flat-routes.js:97:23)
    at Object.resolveConfig (/Users/xxxx/sources/app/node_modules/@remix-run/dev/dist/config.js:153:33)
    at async resolvePluginConfig (/Users/xxxx/sources/app/node_modules/@remix-run/dev/dist/vite/plugin.js:209:9)
    at async config (/Users/xxxx/sources/app/node_modules/@remix-run/dev/dist/vite/plugin.js:338:26)
    at async runConfigHook (file:///Users/xxxx/sources/app/node_modules/vite/dist/node/chunks/dep-vyqc0_aB.js:67500:25)
    at async resolveConfig (file:///Users/xxxx/sources/app/node_modules/vite/dist/node/chunks/dep-vyqc0_aB.js:66953:14)
    at async _createServer (file:///Users/xxxx/sources/app/node_modules/vite/dist/node/chunks/dep-vyqc0_aB.js:59492:20)
    at async CAC.<anonymous> (file:///Users/xxxx/sources/app/node_modules/vite/dist/node/cli.js:764:24)

I think I know where the issue is but not how to fix it. It seems that npx remix routes ignores the vite.config.ts completely and is using some standard Remix config, which explains the whole mess. Even entering some garbage into vite.config.ts does not prevent npx remix routes from starting, while it crashed npm run dev, as it should. So your package works fine as it is properly executed and configured under Vite dev server, but command line tool does not as it skips Vite config.

[kiliman]

That's really odd. I just tried it with Remix v2.3.1 and remix-flat-routes v0.6.2.

Which version of rfr are you using?

❯ tree app/routes   
app/routes
├── $.tsx
├── _public+
│   ├── _layout
│   │   ├── FancyFooter.module.css
│   │   ├── FancyFooter.tsx
│   │   ├── layout.module.css
│   │   └── layout.tsx
│   ├── about-us
│   │   ├── ContactIcon.module.css
│   │   ├── ContactIcon.tsx
│   │   ├── _about-us.tsx
│   │   └── about-us.module.css
│   ├── index
│   │   └── page.tsx
│   └── signin.tsx
└── dashboard
    └── _layout.tsx

❯ npx remix routes
<Routes>
  <Route file="root.tsx">
    <Route path="*" file="routes/$.tsx" />
    <Route file="routes/_public+/_layout/layout.tsx">
      <Route path="about-us" file="routes/_public+/about-us/_about-us.tsx" />
      <Route index file="routes/_public+/index/page.tsx" />
      <Route path="signin" file="routes/_public+/signin.tsx" />
    </Route>
    <Route path="dashboard" file="routes/dashboard/_layout.tsx" />
  </Route>
</Routes>

[bjuretic]

That's really odd. I just tried it with Remix v2.3.1 and remix-flat-routes v0.6.2.

Have you added Vite to the project as per instructions at https://remix.run/docs/en/main/future/vite ?

Which version of rfr are you using?

0.6.2

As I said, it all works fine without Vite.

[kiliman]

Here's my starter repo for Remix + Vite. It also includes Tailwind CSS.

https://github.com/kiliman/remix-vite-2.2.0

[bjuretic]

Here's my starter repo for Remix + Vite. It also includes Tailwind CSS.

https://github.com/kiliman/remix-vite-2.2.0

Sorry I did not understand this. I see the repo, but there is no remix-flat-routes in it, so not sure how it applies?

[kiliman]

It was just to show how I setup Remix + Vite.

When I get a moment, I'll push up the repo that has remix-flat-routes.

[bjacobso]

I'm having this issue as well. I believe its because the remix cli doesn't know how to look at the vite config. It is working in your example repo @kiliman because your vite config is importing it's remix config from the normal remix.config.js, thus vite and remix cli are sharing the same source of truth.

I followed that same pattern and the issue has been resolved for my app. Ultimately I think this needs to be raised upstream in remix.

[kiliman]

Ah, I see. Yes, I don't think the Remix CLI supports Vite yet.

[bjuretic]

I followed that same pattern and the issue has been resolved for my app. Ultimately I think this needs to be raised upstream in remix.

Yeah, good catch. What I did to resolve this was to leave my vite.config.ts but add remix.config.js with the contents:

// TMP fix for npx remix routes to work with Vite; vite.config.js is the actual config used for the app

import { flatRoutes } from "remix-flat-routes";

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  routes: async (defineRoutes) => {
    return flatRoutes('routes', defineRoutes)
  },
}

And now both npx remix routes (without Vite) and npm run dev (with Vite) work fine.

[lennerd]

This is still an issue even with the vite plugin being stable now. Any ideas on how to fix this?

[kiliman]

@lennerd Can you show me your vite.config.ts and remix.config.js file?

Compare them to what I have in remix-vite-template. https://github.com/kiliman/remix-vite-template

[lennerd]

@kiliman thanks for the quick response!

Yeah that should work because you have both files.

So we always need both for remix routes to work? That sounds non intuitive, no? Maybe something we need to create an issue for in Remix dev tools repo?

[kiliman]

A new PR just landed that now will read the Remix config from vite.config.ts for the Remix CLI. So it should be in the next release.

https://github.com/remix-run/remix/pull/8916

[maximilize]

The remix PR has been merged into the newest version.

[maximilize]

Maybe an updated Readme would be nice.