@netlify/vite-plugin-react-router couldn't complete build process with react-router v7

[abisalde]

Hi,

I have been trying all sorts of solutions to get my deployment working locally and on the Netlify domain, but the build failed to complete the build process.

DOMAIN: https://analytics-logging.netlify.app/
NODE-VERSION: v20.19.2

Error Below:

Jun 27, 10:23:56 PM: 4259141a INFO   [GET] https://685f0bc37c59840008a9f9ef--analytics-logging.netlify.app/
Jun 27, 10:23:56 PM: 4259141a ERROR  TypeError: Cannot read properties of undefined (reading 'manifestPath')
    at requestHandler (/var/task/node_modules/@netlify/vite-plugin-react-router/node_modules/react-router/dist/development/index.js:11020:29)
    at Module.<anonymous> (file:///var/task/node_modules/@netlify/vite-plugin-react-router/dist/index.mjs:14:30)
    at async bm (file:///var/task/___netlify-bootstrap.mjs:3:109468)
    at async Runtime.handler (file:///var/task/___netlify-bootstrap.mjs:3:109139)
    at async Runtime.handleOnceStreaming (file:///var/runtime/index.mjs:1238:26)

The page keeps showing an Internal error on https://analytics-logging.netlify.app/

On my local machine, I can see this error below.

Netlify Build Complete                                        
────────────────────────────────────────────────────────────────
​
(Netlify Build completed in 3.7s)

⬥ Static server listening to 3999

   ╭─────────────────────── ⬥  ────────────────────────╮
   │                                                   │
   │   Local dev server ready: http://localhost:8888   │
   │                                                   │
   ╰───────────────────────────────────────────────────╯

Request from ::1: GET /

⬥ Function react-router-server has returned an error: Cannot find module '/Users/xxx/Documents/analytics/.netlify/functions-serve/.unzipped/react-router-server/node_modules/react-router/dist/development/index.mjs' imported from /Users/xxx/Documents/analytics/.netlify/functions-serve/.unzipped/react-router-server/.netlify/v1/functions/react-router-server.mjs

[marcus.little]

hey @abisalde thanks for getting in touch! Keep in mind as well that if it doesn’t build locally, it will not build on Netlify.

Can you confirm that after installing the plugin, you adjusted your vite.config.ts file as mentioned in the docs here? React Router on Netlify | Netlify Docs

[abisalde]

Hi @marcus.little ,

Yes, I did. I followed the docs to the later and did the same for the template providing by react-router team for Netlify and got the same error as mine.

I logged an issue on GitHub here. Netlify failed to start production build using netlify template or @netlify/vite-plugin-react-router with V7 Framework mode · Issue #135 · remix-run/react-router-templates · GitHub

Thank you for reaching out

[marcus.little]

thanks for following up and opening that issue! I’m wondering if the issue is that you still need to run the remix.init script. When you install deps with npm via npx create-remix@latest, you’re prompted to run the script during setup:

  deps   Install dependencies with npm?
         Yes

  init   This template has a remix.init script. Do you want to run it?
         Yes

      ✔  Dependencies installed
      ✔  Dependencies for remix.init script installed

      ◼  Running template's remix.init script... 

However when opting out (to instead use yarn), this step gets skipped, although you’d still need to run the script manually:

  deps   Install dependencies with npm?
         No
      ◼  Skipping install step. Remember to install dependencies after setup with npm install.

      ✔  Git initialized

      ◼  Skipping template's remix.init script. After installing dependencies, you can run the script in the remix.init directory with npx remix init.

Can you let me know if you completed that step as well? When going through this setup and installing the script, I’m able to get the home page to render properly:

[jay7780]

ok I got it, have you done this before ?

[abisalde]

Hi @marcus.little ,

I am not using Remix but I am using Vite-config and I followed through with npx create-react-router@latest and following the prompt as shown on the terminal

[marcus.little]

hey @abisalde thanks again for following up on this, and apologies for the misunderstanding there. If you’re looking to just run straight React Router, I’d still recommend Netlify’s own internal docs: React Router on Netlify | Netlify Docs

1. scaffold the project npx create-react-router@latest --template netlify/react-router-template
2. install the dependencies yarn
3. yarn run dev

let me know if this helps!

[santiago_j_s]

Hi Marcus, when you use the netlify/react-router-template, the start command runs npm run dev. The start command should serve the built files (which is the original issue of this thread), rather than running the dev server

I’m trying to debug a production-specific issue, so I need a better environment to test the built files. The behavior of Vite varies significantly between development and production. Additionally, Netlify wraps everything in a server function for production, making npm run dev far from ideal for debugging

Also, the docs are pretty sparse right now, mostly just a command to run. It would be awesome to have more detailed documentation for react-router v7