WebSocket connection failed

onemen commented 1 year ago

@kentcdodds

This issue triggered by using <LiveReload /> without loading its script with <Scripts />

either remove <LiveReload />

export default function App() {
    return (
        <html lang="en">
            {/* 🐨 Create a <head> here and put Remix's <Links /> in it */}
            <body>
                <p>Hello World</p>
-               <LiveReload />
                <KCDShopIFrameSync />
            </body>
        </html>
    )
}

or add <Scripts />, react throw errors when there is no with head in this case


export default function App() {
    return (
        <html lang="en">
-           {/* 🐨 Create a <head> here and put Remix's <Links /> in it */}
+           <head>{/* 🐨 Put Remix's <Links /> here */}</head>
            <body>
                <p>Hello World</p>
+               <Scripts />
                <LiveReload />
                <KCDShopIFrameSync />
            </body>
        </html>
    )
}```

kentcdodds commented 1 year ago

This is very helpful! I'll think about this... It sure would be annoying to not get live reload until the scripts show up, but I also like adding the scripts later. I think I know what I want to do though. Thanks for researching this!

onemen commented 1 year ago

👍

epicweb-dev / full-stack-foundations

WebSocket connection failed #1