remix icon indicating copy to clipboard operation
remix copied to clipboard

Hot reload doesn't work on Architect (AWS Lambda) template

Open secretshardul opened this issue 3 years ago • 2 comments

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

lambda-remix-issue

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>.

secretshardul avatar Sep 21 '22 08:09 secretshardul

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.

fitfab avatar Sep 22 '22 02:09 fitfab

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!

RobertBroersma avatar Oct 19 '22 11:10 RobertBroersma

This is probably because one of your browser extensions is injecting code : https://remix.run/pages/gotchas#browser-extensions-injecting-code

MichaelDeBoey avatar Nov 20 '22 21:11 MichaelDeBoey