useEffect doesn't get called

[tsmith123]

Hi
New to Remix but trying to work with some client-side scrolling logic. As I understand it I need to use a useEffect for client side logic but wherever I put a useEffect it never seems to get called.

I have this in a route file:

import * as React from 'react';
import { useLoaderData } from "@remix-run/react";

...

export default function TestRoute() {
  console.log("HIT 1");
  React.useEffect(() => {
    console.log("HIT 2");
    const scrollListener = () => {
      console.log("HIT 3");
    };

    if (typeof window !== "undefined") {
      window.addEventListener("scroll", scrollListener);
    }

    return () => {
      if (typeof window !== "undefined") {
        window.removeEventListener("scroll", scrollListener);
      }
    };
  }, []);

  ...
}

I can see a "HIT 1" in the terminal logs but I never see "HIT 2" or a "HIT 3" in browser or terminal logs but I assume I should. Am I misunderstanding something obvious?

Remix version: 1.19.1

[phillipkregg]

I'm running into this same issue. Anyone have a workaround?

[lili21]

could you provide a reproduce link? like a codesandbox link or a stackblitz link.

did you render the <Scripts /> component?

[jraoult]

@tsmith123 @lili21 are you using vite by any chance? I'm seeing the same thing and I wonder if it is related.

[vincaslt]

I'm noticing this after the latest release for stable vite

[cbnsndwch]

Same here, on Remix v2.7.2 with Vite + Express Custom Server. I have a useEffect that attaches a keyboard listener to the document on mount.

It worked on RR + Vite SPA, not working on Remix. Trying to wrap my head around the server/client story for effects

[kiliman]

In your custom server, did you run installGlobals()?

[cbnsndwch]

yep, right before mounting the Remix handler into Express

import path from 'node:path';

import { NestExpressApplication } from '@nestjs/platform-express';
import { createRequestHandler } from '@remix-run/express';
import { installGlobals } from '@remix-run/node';

import { static as expressStatic } from 'express';
import sourceMapSupport from 'source-map-support';

sourceMapSupport.install();
installGlobals();

// sensible defaults for most Nest apps
const DEFAULT_NEST_PATHS = ['api', 'graphql'];

// the path to the Remix server build
const BUILD_PATH = path.resolve(process.cwd(), 'build', 'index.js');

export async function mountRemixHandler(
    nestApp: NestExpressApplication,
    NEST_PATHS = DEFAULT_NEST_PATHS
) {
    // ...
}
    

[cbnsndwch]

I'm using NestJS for the server, not sure if it might be messing up with the globals. Any pointers what to look for in terms of call order?

[cbnsndwch]

found the culprit! Was importing from @remix-run/node instead of @remix-run/react in a couple places.

[gvillo]

I was facing the same error and I had a redirect in the component imported from @remix-run/node by mistake, the error is not very descriptive at all, that could be a good improvement. The fix is to replace that redirect with a navigate

[kiliman]

I used my remix-vite-template, and useEffect works fine for me.

If you're console logging, make sure you look in the DevTools console, as useEffect only runs on the client.

Use the code above, here's what I got

If you're still having issues, can you provide a simple repro?

[tsmith123]

Sorry folks. Totally forgot to check back here. My issue was that I'd missed out <Scripts /> in the root file. All good now for me.

[lili21]

That's my first guess. 😅

[imrostom]

I also faced same issue, <Scripts/> tags exits in root.jsx file

[israelsaraiva]

I'm also have <Scripts/> in root file, but still facing the issue.
I also see ReferenceError: process is not defined

[tsmith123]

Well it's highly likely some other issue then. The warning message you're getting is a good place to start. Very difficult to help with the amount of info you've provided.

[phuocduynguyen]

Hi,

I'm facing with thee same issue as well as existing in root file. I also see ReferenceError: process is not defined.
Remix version: 1.19.1

Anyone have a workaround?
Thanks a lot