Setting up Devtools for Vite + React not working

[david-idelji]

Trying to set up Devtools following Publish Quickstart - Builder.io for Vite React but failed.

Detailed steps to reproduce the bug

• Initialize a new Vite + React app with npm create vite@latest . -- --template react-ts
• Run npm init builder.io@latest
• Run npm run dev
• Navigate to http://localhost:5173
• Initial page is still the default vite + react welcome page
• Have to manually change the App.tsx to use the <BuilderComponent model="page" /> component to work
• But even after authorizing the space, it didn’t create the build-page.jsx

Code stack you are integrating Builder with

• Latest (as of writing) Vite + React stack

Reproducible code example
This following playground is forked directly from Vite and I only ran the npm init builder.io@latest command: Vitejs - Vite (forked) - StackBlitz

[jameson]

Thank you @david-idelji for the detailed reproduction steps! I was able to duplicate this issue and have raised a ticket with our team internally and will keep you updated.

In the meantime, I verified that with a fresh template Vite app you can manually complete the quickstart process by navigating to http://localhost:5173/builder-demo as step #4. This will authorize the space, make the necessary changes to your project, and provide next steps for you to configure routing (see screenshot). I hope this helps in the meantime while we work on a fix!