kiliman / remix-flat-routes

Remix package to define routes using the flat-routes convention
MIT License
640 stars 22 forks source link

Vercel deployment issue #102

Closed kinsomicrote closed 5 months ago

kinsomicrote commented 5 months ago

Hello, I added the remix-flat-routes and modified my routes, and then I got this error when I deployed to Vercel.

Error: Unexpected MODIFIER at 10, expected END

This is what my remix.config.js looks like;

import { flatRoutes } from 'remix-flat-routes'

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  serverModuleFormat: 'esm',
    tailwind: true,
  postcss: true,
  routes: async defineRoutes => {
    return flatRoutes('routes', defineRoutes, {
      ignoredRouteFiles: [],
    })
  },
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // publicPath: "/build/",
  // serverBuildPath: "build/index.js",
};

This is what my route looks like:

<Routes>
  <Route file="root.tsx">
    <Route path="dashboard+" file="routes/_admin.dashboard+/index.tsx" />
    <Route file="routes/_layout.tsx">
      <Route path="application-success" file="routes/_layout.application-success.tsx" />
      <Route index file="routes/_layout._index.tsx" />
      <Route path="apply" file="routes/_layout.apply/route.tsx" />
      <Route path="apply" file="routes/_layout.apply/route.tsx" />
    </Route>
    <Route path="dashboard" file="routes/_admin.dashboard+/_layout.tsx">
      <Route path="applicants" file="routes/_admin.dashboard+/applicants+/_layout.tsx">
        <Route path=":id" file="routes/_admin.dashboard+/applicants+/$id.tsx" />
        <Route index file="routes/_admin.dashboard+/applicants+/index.tsx" />
      </Route>
      <Route path="bootcamp-sessions" file="routes/_admin.dashboard+/bootcamp-sessions.tsx">
        <Route path=":id" file="routes/_admin.dashboard+/bootcamp-sessions.$id.tsx">
          <Route index file="routes/_admin.dashboard+/bootcamp-sessions.$id._index.tsx" />
          <Route path="applicants" file="routes/_admin.dashboard+/bootcamp-sessions.$id.applicants.tsx" />
        </Route>
        <Route index file="routes/_admin.dashboard+/bootcamp-sessions._index.tsx" />
      </Route>
      <Route index file="routes/_admin.dashboard+/index.tsx" />
    </Route>
  </Route>
</Routes>

I have no idea what I am missing. Any hints? Thanks.

kiliman commented 5 months ago

Update your remix.config.js file. You need to ignore all files in routes, since Remix will still try to process the routes using the default convention.

import { flatRoutes } from 'remix-flat-routes'

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/*"], // ignore all files in routes (default convention)
  serverModuleFormat: 'esm',
    tailwind: true,
  postcss: true,
  routes: async defineRoutes => {
    return flatRoutes('routes', defineRoutes, {
      ignoredRouteFiles: [],
    })
  },
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // publicPath: "/build/",
  // serverBuildPath: "build/index.js",
};
kinsomicrote commented 5 months ago

That worked! Thanks!