Deploy react-router-v7 to Vercel

Question

I upgraded my remix app to react-router-v7 but cannot get it to deploy on Vercel (used to work fine).

I have done all the things all the internet says but something is going wrong with the type imports it seems.

This is the errorlog

✓ 114 modules transformed.
x Build failed in 1.54s
Could not resolve "./+types/layout" from "app/routes/website/layout.tsx"
file: /vercel/path0/app/routes/website/layout.tsx
    at getRollupError (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
    at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:392:42)
    at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20088:24)
    at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20048:26 {
  code: 'UNRESOLVED_IMPORT',
  exporter: './+types/layout',
  id: '/vercel/path0/app/routes/website/layout.tsx',
  watchFiles: [
    '/vercel/path0/node_modules/@react-router/dev/dist/config/defaults/entry.client.tsx',
    '/vercel/path0/app/root.tsx',
    '/vercel/path0/app/routes/website/layout.tsx',
    '/vercel/path0/app/routes/website/index.tsx',
    '/vercel/path0/app/routes/website/login.tsx',
    '/vercel/path0/app/routes/website/forgot-password.tsx',
    '/vercel/path0/app/routes/website/signup.tsx',
    '/vercel/path0/app/routes/website/signup.success.tsx',
    '/vercel/path0/app/routes/website/privacy.tsx',
    '/vercel/path0/app/routes/website/terms.tsx',
    '/vercel/path0/app/routes/website/update-password.tsx',
    '/vercel/path0/app/routes/website/logout.tsx',

It goes on much longer basically every file there is gives this error. Locally it works fine.

Anyone any idea I am quite desperate.

leerob · Accepted Answer · 2025-02-13 18:25:33Z

2

React Router v7 is now supported on Vercel: https://x.com/vercel_changes/status/1890104465862332725

answered Feb 13 at 18:25

leerob

3,1841 gold badge23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pedro Monteagudo · Accepted Answer · 2025-03-07 21:21:25Z

1

For me the issue was caused by using:

import { type Route } from "./+types/post"; ❌ wrong

instead of:

import type { Route } from "./+types/post"; ✅ good

answered Mar 7 at 21:21

Pedro Monteagudo

4714 silver badges8 bronze badges

Comments

andersr · Accepted Answer · 2025-01-26 19:24:42Z

0

Have you tried using the vercel template at https://github.com/remix-run/react-router-templates?

You can just copy the configs from https://github.com/remix-run/react-router-templates/tree/main/vercel Specifically, you'll want to update:

your build script to "build": "react-router build && node vercel/prepare.js",
copy dev-server.js and add to root.
copy the server dir.
copy the vercel dir.
update vite.config.ts to match
remove any existing start script

Hope that helps.

answered Jan 26 at 19:24

andersr

1,0502 gold badges13 silver badges24 bronze badges

2 Comments

andersr Jan 28 at 13:21

Actually, looking at the error, it seems this may just be an unresolved import and not related to vercel, eg there is type generated by react router that cannot be found. Are you able to reproduce the issue locally, eg run a local build and serving built version locally? Also, double check your tsconfig settings based on the instructions at reactrouter.com/upgrading/remix#7-enable-type-safety

Santi Jan 28 at 20:29

you were right - it was the eslint that messed up the import. was able to solve it. sorry for confusion and thanks for assistance!

Collectives™ on Stack Overflow

Deploy react-router-v7 to Vercel

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related