Detailed steps to reproduce the bug
I’ve been trying to set up a clean Hydrogen project with builder. I cannot get the preview to load in builder. I just have the Preview Load Error
and the popup saying We are having trouble connecting to your site
. The page is published and I’m not getting a 404 when visiting the URL which is a good sign that somethings working (http://localhost:3000/test-page
) and I see some builder related logs for that page:
Steps to reproduce:
-
Create a new hydrogen project following the instructions on their website (I used their default CLI options to create a mock store) - this all works fine and I can run it on the localhost:3000: Getting started with Hydrogen and Oxygen
-
I tried to use the automated builder integration. This made some changes to the package.json etc. The first time I tried it, it did prompt for authorisation, but not when retrying with new clean projects. The builder logo has never appeared at the bottom right when running the dev server: (i.e. “1. On the bottom right, click on the Builder logo to get to your components, settings, and adding a Builder Page.”): Using Builder Devtools for Automated Integration - Builder.io
-
I then switched to the developer quickstart instructions for hydrogen (Developer Quickstart - Builder.io). In step 2, I replaced the entire template
$.tsx
that hydrogen generated with the code provided. The lineimport type { LoaderArgs } from "@remix-run/node";
resulted in an error (Module '"@remix-run/node"' has no exported member 'LoaderArgs'.ts(2305)
) which I then changed toLoaderFunctionArgs
based on some googling which is hopefully the right thing to do. -
I then continued to follow the developer quickstart instructions and set up the models and a new page which I published on builder.io and put in my public API key. The page when running the dev server (http://localhost:3000/test-page) is returning 200 which makes me think some part of the setup is working, but the builder website cannot connect to the site.
Public Repo
Here is a public repo of the full codebase including my public API key:
Code stack you are integrating Builder with
Hydrogen (shopify mock store), typescript, tailwind, node v20.11.0