Legacy project not running on one machine

https://www.reddit.com/r/reactjs/comments/1g3vjk5/legacy_project_not_running_on_one_machine/

created by Floorman1 on 15/10/2024 at 00:48 UTC

2 upvotes, 7 top-level comments (showing 7)

I know this might be a little hard to diagnose but I am really pulling my hair out on this one.

I inherited a project a while back from a third party. The project has quite a few older libraries in it and runs on node 14.19.1 and npm 6.14.16. I had done some development on this about a year ago and since then it's just been on the shelf.

After loading it back up and trying an `npm start`, I received a number of errors in my App.tsx.

^('Redirect' cannot be used as a JSX component.)

^(Its type 'typeof Redirect' is not a valid JSX element type.)

^(Type 'typeof Redirect' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.)

^(Construct signature return types 'Redirect' and 'Component<any, any, any>' are incompatible.)

^(The types returned by 'render()' are incompatible between these types.)

^(Type 'React.ReactNode' is not assignable to type 'import("c:/Users/xyz/node_modules/@types/react/index").ReactNode'.)

^(Type '{}' is not assignable to type 'ReactNode'.ts(2786))

^('Route' cannot be used as a JSX component.)

^(Its type 'typeof Route' is not a valid JSX element type.)

^(Type 'typeof Route' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.)

^(Construct signature return types 'Route<any, any>' and 'Component<any, any, any>' are incompatible.)

^(The types returned by 'render()' are incompatible between these types.)

^(Type 'React.ReactNode' is not assignable to type 'import("c:/Users/xyz/node_modules/@types/react/index").ReactNode'.ts(2786))

After hours of debugging, I took a copy of it and loaded it on a second PC. Compiles and starts fine. This PC didn't have node installed, so I went through the process and set it to use 14.19.1. I then tried uninstalling node on the broken environment and repeating the install just to rule out anything funny there. I cleared out any existing environment variables before reinstalling and still the same issues present themselves.

After reinstalling node, I just did a normal `npm install` (same as the second environment) and yet it fails.

I thought it was highly likely related to @/types/react, at one point some libraries were pulling in a more recent version (we're running 16.14.5) and it was going up to 18~. I couldn't work out why some libraries were inconsistent between the two systems, but I forced them back one by one.

Now like I've said, these are literally two identical copies. Same package.json, same tsconfig.json.

Where to from here?

Comments

Comment by Floorman1 at 15/10/2024 at 00:50 UTC

1 upvotes, 0 direct replies

Appreciate any help!

Comment by mcmillhj at 15/10/2024 at 01:27 UTC

1 upvotes, 1 direct replies

It does sound like a typing issue. This may not be exactly the issue but seems related https://github.com/remix-run/react-router/issues/8794[1].

1: https://github.com/remix-run/react-router/issues/8794

You didn't mention but what version of React does the project use?

Comment by Killed_Mufasa at 15/10/2024 at 05:43 UTC

1 upvotes, 1 direct replies

You can try this:

Delete node_modules
nvm use
npm install
if all else fails: clear npm cache and check for global packages that might interfere

Comment by roy_goodwin_ at 15/10/2024 at 08:05 UTC

1 upvotes, 1 direct replies

Hmm that's a tricky one. Since it works on one machine but not the other with the same setup, I wonder if there could be some subtle difference in the environment or dependencies.

A few things I might try:

Double check the node and npm versions are identical on both
Delete the node_modules folder and package-lock.json, then do a fresh npm install
Look closely at the tsconfig.json and see if there are any absolute paths that could be different between the machines
Check if there are any globally installed packages on the working machine that the broken one is missing

Routing issues can definitely be a pain to debug. Hope you're able to track down the culprit! Let us know if you find a solution.

Comment by Tinkuuu at 15/10/2024 at 13:09 UTC

1 upvotes, 0 direct replies

I started using yarn after I fell few times into npm hell, just doin yarn install to fix dependencies for me.

Comment by nicolasdanelon at 15/10/2024 at 13:40 UTC

1 upvotes, 1 direct replies

so far noone has read the error message.

on the app someone has used the wrong redirect. one thing is redirect on the functions or hooks and the other thing is redirect in the render.

that's your error, happy hacking

Comment by f00dMonsta at 15/10/2024 at 01:19 UTC

-3 upvotes, 0 direct replies

Those paths hurt my brain, you should develop on WSL