remix
remix copied to clipboard
Hot reload doesn't work on Architect (AWS Lambda) template
What version of Remix are you using?
1.7.1
Steps to Reproduce
npx create-remix remix-lambda
# Select architect (AWS Lambda) and typescript
cd remix-lambda
npm run dev
Expected Behavior
Hot reload should work.
Actual Behavior

react-dom.development.js:86 Warning: Expected server HTML to contain a matching <script> in <body>.
at script
at LiveReload2 (http://localhost:3333/_static/build/_shared/chunk-NRV6BSSH.js:3101:3)
at body
at html
at App
at RemixRoute (http://localhost:3333/_static/build/_shared/chunk-NRV6BSSH.js:2530:3)
at Routes2 (http://localhost:3333/_static/build/_shared/chunk-NRV6BSSH.js:2513:7)
at Router (http://localhost:3333/_static/build/_shared/chunk-NRV6BSSH.js:735:15)
at RemixCatchBoundary (http://localhost:3333/_static/build/_shared/chunk-NRV6BSSH.js:1019:10)
at RemixErrorBoundary (http://localhost:3333/_static/build/_shared/chunk-NRV6BSSH.js:944:5)
at RemixEntry (http://localhost:3333/_static/build/_shared/chunk-NRV6BSSH.js:2407:12)
at RemixBrowser (http://localhost:3333/_static/build/_shared/chunk-NRV6BSSH.js:3154:27)
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js:12507:9)
at tryToClaimNextHydratableInstance (react-dom.development.js:12520:7)
at updateHostComponent (react-dom.development.js:19902:5)
at beginWork (react-dom.development.js:21618:14)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at beginWork$1 (react-dom.development.js:27451:7)
at performUnitOfWork (react-dom.development.js:26560:12)
at workLoopSync (react-dom.development.js:26466:5)
react-dom.development.js:86 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
I have the same issue running remix 1.7.1
npx create-remix@latest- Select
Architect (AWS Lambda) and typescript
When I commented out the <LiveReload /> in the root.tsx, the error goes away.
As a (temporary) fix, try adding NODE_ENV=development to your existing or a new .env file.
Explanation can be found in https://github.com/remix-run/remix/issues/1756#issuecomment-1065682371 and the rest of the issue as well!
This is probably because one of your browser extensions is injecting code : https://remix.run/pages/gotchas#browser-extensions-injecting-code