[Bug]: Live Reload not working. #1601

drewkill32 · 2022-01-21T18:42:22Z

Which Remix packages are impacted?

remix (Remix core)
@remix-run/react
@remix-run/serve

What version of Remix are you using?

1.1.3

What version of Node are you using? Minimum supported version is 14.

14.17.4

Steps to Reproduce

starting from the Quickstart template.
create a posts route.
navigate to route
the route does not show up

Every step along the way I have to restart the dev server to see the changes in the web. For example I added

export default function Posts() {
    const posts = useLoaderData();
    console.log('test3');
    return (
        <div>
            <h1>Posts</h1>
        </div>
    );
}

and the console still shows that it reloaded but still shows test2 (the value from when the dev server started)

Navigated to http://10.202.57.104:3000/posts
index.tsx:18 test2
posts:23 💿 File changed: app\routes\posts\index.tsx
posts:23 💿 Rebuilding...
posts:23 💿 Rebuilt in 201ms
posts:26 💿 Reloading window ...
Navigated to http://10.202.57.104:3000/posts
index.tsx:18 test2

I'm on Windows using Chrome(97.0.4692.71) and Edge(Version 97.0.1072.62), both failed

Expected Behavior

the hot reload should show the changes without having to restart

Actual Behavior

I have to stop the dev server and restart to see any changes

The text was updated successfully, but these errors were encountered:

jacob-ebey · 2022-01-21T19:11:35Z

Check that the component is making it onto your page. If it's not, the first thing to check is what the value of NODE_ENV is when you run. If it's not "development", set it before you start the dev command.

drewkill32 · 2022-01-21T20:30:10Z

The component is on the page. I just double-checked the NODE_ENV by adding <p>{process.env.NODE_ENV}</p> to the component and restarted the server. It is in development

drewkill32 · 2022-01-27T13:26:55Z

I still have not found a solution other than it the hot-reloading it working on my Linux machine but refuses to work on Windows.

kurdi-dev · 2022-02-06T11:55:19Z

I'm also using Windows and I realized hot-reloads only work when I make changes inside the app directory of my Remix project.
I don't know if this is how it is supposed to work or it's a bug!

dan-cooke · 2022-02-09T15:43:25Z

Same issue on MacOS. Nothing makes it work for me, even if i remove the process.env.NODE_ENV check around <LiveReload/>

I have reproduced the issue on 1.1.3 1.1.2 and 1.1.1 so downgrading does not appear to help.

I am using arc sandbox - so this may be affecting it.

Its dropped the Remix DX from a 10/10 down to a 1/10. I've had to put my project on hold until this is fixed. :(

All my components are inside the app directory

adamhp · 2022-02-10T22:13:49Z

I'm also using Windows and I realized hot-reloads only work when I make changes inside the app directory of my Remix project. I don't know if this is how it is supposed to work or it's a bug!

Interesting observation. I was struggling with this and your point made me realize I currently have all my components in a components/ folder outside of my app/ directory. I just did a brief experiment and moving a component into the app/ directory seems to fix it — i.e. causes changes to reflect on the hot reload live.

As a possible feature, could we provide paths to whatever is watching the filesystem for hot reload?

seyaobey-dev · 2022-02-12T15:03:52Z

In my case I have all my components inside the ./app folder. But hot-reload is still not work. I am on MacOS

outmost · 2022-02-15T20:34:17Z

I still have not found a solution other than it the hot-reloading it working on my Linux machine but refuses to work on Windows.

I hit the same problems, then realised that WSL was sat in the middle. Live Reload started working perfectly once I moved my working directory to the Linux filesystem. https://docs.microsoft.com/en-us/windows/wsl/setup/environment#file-storage

nippur72 · 2022-02-17T09:28:44Z

same problem here on Windows and create-remix, I'm trying to follow the QuickStart tutorial but it doesn't reload 😢

Tymek · 2022-03-15T19:26:58Z

Live Reload started working perfectly once I moved my working directory to the Linux filesystem. https://docs.microsoft.com/en-us/windows/wsl/setup/environment#file-storage

It doesn't seem to work on my end, even though I have project files in \\wsl$\.... It doesn't work in WSL2 or Docker. I don't know if it's related, but I get an error in browser console:

react-dom.development.js:67 Warning: Did not expect server HTML to contain a <script> in <html>.
    at head
    at html
    at http://localhost:3000/build/_shared/chunk-ONGAJZNE.js:20292:45
    at App
    at RemixRoute (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:2492:3)
    at Routes2 (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:2475:7)
    at Router (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:287:15)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:1022:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:947:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:2372:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:3068:27)
    at ClientCacheProvider (http://localhost:3000/build/entry.client-SUATVO3Z.js:30:32)

machour · 2022-03-18T09:33:11Z

@Tymek the warning is unrelated, check #1077

Tymek · 2022-03-20T17:40:10Z

Thx.

FIY everybody, if you move to Remix Stack (Blues) there is no issue with hot reloading in WSL2. It is using pm2 server internally for that, AFAIK. That's what I did.

mayank99 · 2022-03-24T00:21:01Z

Hot reload doesn't work for me on [email protected] with the starter templates. I'm on Windows with WSL2.

I dug a little deeper and found the root cause here: microsoft/WSL#4739

This issue comes up across many tools, and the workaround is often to switch to polling.

For example, chokidar provides the usePolling flag: https://github.com/paulmillr/chokidar#performance
Vite also forwards the usePolling flag from chokidar for this exact reason: https://vitejs.dev/config/#server-watch
esbuild watch mode uses polling by default: https://esbuild.github.io/api/#watch

Maybe remix should also offer a polling option?

mikestopcontinues · 2022-03-24T21:43:34Z

I don't mean to +1, but I'm also getting the issue on mac, with a fresh vercel/ts boilerplate.

Devr-pro · 2022-03-25T04:17:04Z

Same issue with me
Am on Windows10 and all setup of remix was good but I then realized that My localhost isnt hotreloading on changes..,
I have used this exp {process.env.NODE_ENV === 'development' ? <LiveReload/> : null} ..,But still my issue is persisting.

kiliman · 2022-03-25T18:03:59Z

They had started removing cross-env NODE_ENV=development from the package.json scripts. Due to the order in which things were occurring, the internal <LiveReload/> component wasn't getting the property environment.

Re-add the cross-env and it should work.

mikestopcontinues · 2022-03-26T14:47:08Z

@kiliman It doesn't work with or without manually setting NODE_ENV via CLI, .env, or in the config files. NODE_ENV is 'development' without any of them anyway.

BiffBish · 2022-03-27T15:53:52Z

Any known fixes? Running remix on WSL Ubuntu 20.04

kiliman · 2022-03-28T15:01:11Z

<LiveReload/> is a simple component. You can simply inline it in your root route.

export const LiveReload =
  process.env.NODE_ENV !== "development"
    ? () => null
    : function LiveReload({
        port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002),
      }: {
        port?: number;
      }) {
        let setupLiveReload = ((port: number) => {
          let protocol = location.protocol === "https:" ? "wss:" : "ws:";
          let host = location.hostname;
          let socketPath = `${protocol}//${host}:${port}/socket`;

          let ws = new WebSocket(socketPath);
          ws.onmessage = (message) => {
            let event = JSON.parse(message.data);
            if (event.type === "LOG") {
              console.log(event.message);
            }
            if (event.type === "RELOAD") {
              console.log("💿 Reloading window ...");
              window.location.reload();
            }
          };
          ws.onerror = (error) => {
            console.log("Remix dev asset server web socket error:");
            console.error(error);
          };
        }).toString();

        return (
          <script
            suppressHydrationWarning
            dangerouslySetInnerHTML={{
              __html: `(${setupLiveReload})(${JSON.stringify(port)})`,
            }}
          />
        );
      };

BiffBish · 2022-03-30T22:25:55Z

<LiveReload/> is a simple component. You can simply inline it in your root route.

export const LiveReload =
  process.env.NODE_ENV !== "development"
    ? () => null
    : function LiveReload({
        port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002),
      }: {
        port?: number;
      }) {
        let setupLiveReload = ((port: number) => {
          let protocol = location.protocol === "https:" ? "wss:" : "ws:";
          let host = location.hostname;
          let socketPath = `${protocol}//${host}:${port}/socket`;

          let ws = new WebSocket(socketPath);
          ws.onmessage = (message) => {
            let event = JSON.parse(message.data);
            if (event.type === "LOG") {
              console.log(event.message);
            }
            if (event.type === "RELOAD") {
              console.log("💿 Reloading window ...");
              window.location.reload();
            }
          };
          ws.onerror = (error) => {
            console.log("Remix dev asset server web socket error:");
            console.error(error);
          };
        }).toString();

        return (
          <script
            suppressHydrationWarning
            dangerouslySetInnerHTML={{
              __html: `(${setupLiveReload})(${JSON.stringify(port)})`,
            }}
          />
        );
      };

This doesn't seem to work? i start up the server and when i make a change to a document and do ctrl+s nothing happens int he console and the page doesn't recompile and build

nilobarp · 2022-04-04T04:58:01Z

Had the same issue. Fixed by changing remix.confix.js
from:

module.exports = {
  ignoredRouteFiles: [".*"],
};

to:

module.exports = {
  cacheDirectory: "./node_modules/.cache/remix",
  ignoredRouteFiles: [".*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
};

mikestopcontinues · 2022-04-04T20:53:37Z

@nilobarp That's already in my remix.config.js. Why would it matter either way? My best guess is these "solutions" are all part of an elaborate April fools prank. 😁

kiliman · 2022-04-04T22:41:30Z

I believe there was a bug in the dev tool in that it wasn't passing the REMIX_DEV_SERVER_WS_PORT variable to the compiler. Have you tried the latest version? Remix now gets a random unused port for the WS port.

nilobarp · 2022-04-04T22:47:37Z

@mikeybinnswebdesign wish it was a prank. I tried everything mentioned in this thread, the only thing that worked was the change in remix.config.js. I undid the change reload stopped working, bring it back reload works again.

This is too much magic for my brain.

mikestopcontinues · 2022-04-05T00:42:26Z

@nilobarp @kiliman — Just figured out, for me it was disabling devServerPort which doesn't seem to be working anyway. Thanks!

LukeXF · 2022-04-07T17:12:24Z

LiveReload does not work for me,

I copied the code that @kiliman shared and added more console logs. The frontend never seems to connect to the WS server and is just constantly pending.

No ws.onmessage console.log is ever ran either.

Any suggestions?

dreymoreau · 2023-07-08T16:02:07Z

@LukeXF Are you on Mac or Windows?

Did you add/change devServerPort in remix.config?

Also check to see if REMIX_DEV_SERVER_WS_PORT environment variable is defined.

Worst case, just update your dev script to:

"cross-env NODE_ENV=development PORT=3000 REMIX_DEV_SERVER_WS_PORT=8002 remix dev"

Also, try to connect to the web socket server using your browser: http://localhost:8002

You should see the message "Upgrade Required"

this helped!!! thanks so much :D

rodolphoasb · 2023-10-17T01:45:47Z

If anyone tried everything that was suggested here and it still didn't work, I just restarted my MacBook and it's working now, seriously.

BoilingSoup · 2023-10-24T02:55:47Z

The official remix tutorial runs straight into this problem. Not a good first experience with the framework

adaboese · 2023-10-28T22:13:43Z

What's the latest here?

karolis-sh · 2023-10-29T21:20:29Z

I had previously removed both app/entry.server.tsx and app/entry.client.tsx (as I thought they were redundant based on generated file comments), regenerating them via npx remix reveal seems to have fixed issues wit live reloading

enBonnet · 2023-10-30T11:48:56Z

I fix this by adding the components directory that I have outside of the app directory in the watchPaths array, my remix.conf.js file looks like this:

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  watchPaths: ["./components"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // publicPath: "/build/",
  // serverBuildPath: "build/index.js",
};

rodolphoasb · 2023-10-31T19:37:58Z

Reminder: you can use Vite now, which should improve this 🥳 https://remix.run/docs/en/main/future/vite#migrating

camdowney · 2023-11-01T15:45:27Z

Guess I should've actually read the docs first... fixed everything by changing my root.tsx from this:

export default () => {

To this:

export default function Root() {

I have no idea if this is a common limitation across frameworks, but the docs clearly state not to do what I was doing: https://remix.run/docs/en/main/discussion/hot-module-replacement.

enBonnet · 2023-11-01T20:05:42Z

Guess I should've actually read the docs first... fixed everything by changing my root.tsx from this:
export default () => {
To this:
export default function Root() {
I have no idea if this is a common limitation across frameworks, but the docs clearly state not to do what I was doing: https://remix.run/docs/en/main/discussion/hot-module-replacement.

Good to know.

adaboese · 2023-11-02T01:09:57Z

Good to know!

atalayozmen · 2023-11-04T19:20:08Z

I was having the same issue with the blues stack, I started with the template that had LiveReload after Scripts. I changed the order now where LiveReload comes first, and now it is fixed. This is important if you are using vitest.
Source: https://remix.run/docs/en/main/future/vite#livereload-before-scripts

From root.tsx:

      <body className="h-full">
          <Outlet />
          <ScrollRestoration />
          <LiveReload /> //comes before <Scripts/>
          <Scripts />
      </body>

alisnino · 2023-11-23T07:09:50Z

This is the most basic feature a frontend dev framework should have; it's not working in Nov/2023 so I'll report to my team Remix is not worth considering yet 😇

enBonnet · 2023-11-23T09:15:52Z

This is the most basic feature a frontend dev framework should have; it's not working in Nov/2023 so I'll report to my team Remix is not worth considering yet 😇

It is working, but we have to improve the documentation because it'd work properly if you keep your code inside the /app directory.

adaboese · 2023-11-23T13:28:50Z

My structure is as follows:

└── src
    ├── app
    │   ├── defer
    │   └── routes
    │       ├── ...
    ├── components
    │   ├── previews
    │   │   └── data-table
    │   └── ui
    │       └── toast
    ├── hooks
    ├── routines
    ├── services
    ├── styled-system
    │   ├── css
    │   ├── jsx
    │   ├── patterns
    │   ├── recipes
    │   ├── tokens
    │   └── types
    └── utilities

Does this mean I need to move src/hooks/, src/components/, ... to src/app/?

Do I need to use named function for everything?

pcattori · 2023-11-23T15:57:17Z

There seem to be multiple different issues people are running into.

Named exports

Named exports are required for HMR. Note that this is a limitation of React Fast Refresh, not Remix. Thus the same limitation is present in Vite and Next.

Code outside of `app/` dir

Expecting changes outside of app/ to trigger hot updates. As already mentioned, you can add those paths to watchPaths, but we'd recommend keeping all your app code within app/ anyway.

`LiveReload` before `Scripts` (Vite)

This limitation has been removed from unstable Vite support. The order of LiveReload and Scripts no longer matters.

Quickstart/Tutorial not working

@BoilingSoup I couldn't reproduce this error, but if you are still running into it could you file a separate issue?

This issue was already too broad when it was first created, so moving forward please file separate issues with your specific problem so that we can make sure we prioritize a fix.

pcattori · 2023-11-23T16:05:19Z

@alisnino are you facing a different issue than the ones I mentioned?

rodolphoasb · 2023-11-23T16:07:35Z

Hey, @pcattori, first, I'd like to thank you for your amazing work integrating Vite.

Here's an issue that I opened related to the Vite live reload: #7853 (there's a repo where you can reproduce it), and tbh it makes the DX really bad.

Not sure how complex it is, but happy to take a look at the weekend if you could give me some pointers...

pcattori · 2023-11-23T21:11:22Z

@rodolphoasb let's keep the discussion for that on your issue since this issue is focused on the current (non-Vite) compiler/dev server

adaboese · 2023-11-23T22:55:40Z

Can anyone recommend a workaround for naming functions? Using arrow functions would have quite a few downsides

BoilingSoup · 2023-11-23T23:28:32Z

@BoilingSoup I couldn't reproduce this error, but if you are still running into it could you file a separate issue?

#7466

It is here.

pcattori · 2023-11-25T17:37:51Z

@adaboese you can use function keyword or arrow functions as long as they are named. Examples of this are in the docs.

dharmendra94 · 2023-12-06T21:11:12Z

Hey @pcattori, Even in the named exported functions from a package outside the app directory as below:

In repo/packages/home

export function Home() {
  return (<>Content here</>);
}

In repo/apps/remix-app/routes/home.tsx

import { Home, handle } from "@scope/home-package";
import { action, loader } "@scope/home-package/server";

export default Home;

export { action, loader, handle };

I am observing the HMR is not working when I make a change inside the Home package (I got it under watchPaths, and the connection from the dev server to the browser's LiveReload is working fine)

================

And the moment I change the route file as below, HMR starts working.

In repo/apps/remix-app/routes/home"

import { Home } from '@scope/home-package';

export default function HomePage() {
  return Home();
}

pcattori · 2023-12-07T16:54:15Z

@dharmendra94 does this work in Vite? I'm wondering if this is just a limitation of the isLikelyComponent check from React Refresh

dharmendra94 · 2023-12-11T20:27:53Z

Hey, @pcattori, I have tried Vite, and the issue no longer exists. Now I am curious, when will Vite be stable and ready for production? 🤔

adaboese · 2023-12-16T04:30:12Z

Code outside of app/ dir
Expecting changes outside of app/ to trigger hot updates. As already mentioned, you can add those paths to watchPaths, but we'd recommend keeping all your app code within app/ anyway.

I think watchPaths does not exist as an option when using with Vite plugin?

kiliman · 2023-12-17T17:02:46Z

@adaboese

I think watchPaths does not exist as an option when using with Vite plugin?

I haven't tried it yet, but you might try adding esbuild.include to your vite.config.js to add additional paths.

https://vitejs.dev/config/shared-options.html#esbuild

pcattori · 2023-12-18T17:11:59Z

Hey, @pcattori, I have tried Vite, and the issue no longer exists. Now I am curious, when will Vite be stable and ready for production? 🤔

https://twitter.com/markdalgleish/status/1736240852308251053

#8266

drewkill32 added the bug Something isn't working label Jan 21, 2022

JohanAltamar mentioned this issue Jan 24, 2022

[Bug]: Remix tutorial: link not working with version 1.1.3 #1621

Closed

dan-cooke mentioned this issue Feb 9, 2022

[Bug]: Hot Reload not working with Cloudflare Pages #1137

Closed

MichaelDeBoey added the renderer:react label Mar 29, 2022

gelouko mentioned this issue May 13, 2023

LiveReload not working epicweb-dev/epic-stack#27

Closed

chrisvxd mentioned this issue Dec 5, 2023

puck.config.tsx not watched by Remix recipe measuredco/puck#273

Closed

underfisk mentioned this issue Dec 11, 2023

[Vite plugin] Livereload with Tailwind is not working #7853

Closed

1 task

[Bug]: Live Reload not working. #1601

[Bug]: Live Reload not working. #1601

Comments

drewkill32 commented Jan 21, 2022 • edited by machour Loading

Which Remix packages are impacted?

What version of Remix are you using?

What version of Node are you using? Minimum supported version is 14.

Steps to Reproduce

Expected Behavior

Actual Behavior

jacob-ebey commented Jan 21, 2022

drewkill32 commented Jan 21, 2022

drewkill32 commented Jan 27, 2022

kurdi-dev commented Feb 6, 2022

dan-cooke commented Feb 9, 2022 • edited Loading

adamhp commented Feb 10, 2022

seyaobey-dev commented Feb 12, 2022

outmost commented Feb 15, 2022

nippur72 commented Feb 17, 2022

Tymek commented Mar 15, 2022 • edited Loading

machour commented Mar 18, 2022

Tymek commented Mar 20, 2022 • edited Loading

mayank99 commented Mar 24, 2022

mikestopcontinues commented Mar 24, 2022

Devr-pro commented Mar 25, 2022

kiliman commented Mar 25, 2022

mikestopcontinues commented Mar 26, 2022 • edited Loading

BiffBish commented Mar 27, 2022

kiliman commented Mar 28, 2022

BiffBish commented Mar 30, 2022

nilobarp commented Apr 4, 2022

mikestopcontinues commented Apr 4, 2022 • edited Loading

kiliman commented Apr 4, 2022

nilobarp commented Apr 4, 2022

mikestopcontinues commented Apr 5, 2022

LukeXF commented Apr 7, 2022

dreymoreau commented Jul 8, 2023

rodolphoasb commented Oct 17, 2023

BoilingSoup commented Oct 24, 2023

adaboese commented Oct 28, 2023

karolis-sh commented Oct 29, 2023

enBonnet commented Oct 30, 2023

rodolphoasb commented Oct 31, 2023 • edited Loading

camdowney commented Nov 1, 2023 • edited Loading

enBonnet commented Nov 1, 2023

adaboese commented Nov 2, 2023

atalayozmen commented Nov 4, 2023 • edited Loading

alisnino commented Nov 23, 2023

enBonnet commented Nov 23, 2023

adaboese commented Nov 23, 2023

pcattori commented Nov 23, 2023 • edited Loading

Named exports

Code outside of app/ dir

LiveReload before Scripts (Vite)

Quickstart/Tutorial not working

pcattori commented Nov 23, 2023

rodolphoasb commented Nov 23, 2023 • edited Loading

pcattori commented Nov 23, 2023 • edited Loading

adaboese commented Nov 23, 2023

BoilingSoup commented Nov 23, 2023

pcattori commented Nov 25, 2023

dharmendra94 commented Dec 6, 2023 • edited Loading

pcattori commented Dec 7, 2023

dharmendra94 commented Dec 11, 2023

adaboese commented Dec 16, 2023

kiliman commented Dec 17, 2023

pcattori commented Dec 18, 2023 • edited Loading

drewkill32 commented Jan 21, 2022 •

edited by machour

Loading

dan-cooke commented Feb 9, 2022 •

edited

Loading

Tymek commented Mar 15, 2022 •

edited

Loading

Tymek commented Mar 20, 2022 •

edited

Loading

mikestopcontinues commented Mar 26, 2022 •

edited

Loading

mikestopcontinues commented Apr 4, 2022 •

edited

Loading

rodolphoasb commented Oct 31, 2023 •

edited

Loading

camdowney commented Nov 1, 2023 •

edited

Loading

atalayozmen commented Nov 4, 2023 •

edited

Loading

pcattori commented Nov 23, 2023 •

edited

Loading

Code outside of `app/` dir

`LiveReload` before `Scripts` (Vite)

rodolphoasb commented Nov 23, 2023 •

edited

Loading

pcattori commented Nov 23, 2023 •

edited

Loading

dharmendra94 commented Dec 6, 2023 •

edited

Loading

pcattori commented Dec 18, 2023 •

edited

Loading