remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
30.01k stars 2.53k forks source link

404 error using redirect with v3_lazyRouteDiscovery #10232

Open srod opened 3 days ago

srod commented 3 days ago

Reproduction

I'm doing a redirect in a AuthLayout (AuthLayout.tsx) according if session is true/false

And when navigating to /login I have a 404 error

Small reproduction : https://github.com/srod/remix-v3_lazyRouteDiscovery

If you go with your browser to /protected you will have that 404

Error: No routes matched location "/login" ErrorResponseImpl {status: 404, statusText: 'Not Found', internal: true, data: 'Error: No route matches URL "/login"',

Discord link if needed: https://discord.com/channels/770287896669978684/1306915010701824063

System Info

System:
    OS: macOS 15.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 95.27 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.config/nvm/versions/node/v22.11.0/bin/node
    Yarn: 1.22.22 - ~/.config/nvm/versions/node/v22.11.0/bin/yarn
    npm: 10.9.0 - ~/.config/nvm/versions/node/v22.11.0/bin/npm
    pnpm: 9.12.3 - ~/.config/nvm/versions/node/v22.11.0/bin/pnpm
    bun: 1.1.34 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.69
    Edge: 131.0.2903.48
    Safari: 18.1
  npmPackages:
    @remix-run/dev: ^2.14.0 => 2.14.0
    @remix-run/node: ^2.14.0 => 2.14.0
    @remix-run/react: ^2.14.0 => 2.14.0
    @remix-run/serve: ^2.14.0 => 2.14.0
    vite: ^5.1.0 => 5.4.11

Used Package Manager

npm

Expected Behavior

Navigate to /login without 404 error.

Actual Behavior

When navigate to /login we have an error.

maximeclaisse commented 5 hours ago

This issue also happens in this very simple case :

  1. Create a remix app with npx create-remix@latest
  2. Create a valid page such as export default function TestPage() { return <div>Test</div>; }
  3. In _index.tsx, add useEffect(() => { navigate("/test"); }, []);
  4. Get a 404, with this error message in the console image
  5. Refresh the page and get actual page

Note : if navigate(...) is wrapped in a function called on a button click, it works.

EDIT : The issue only happens when running the project with npm run dev. After using npm run build & npm run start, it works fine. EDIT2 : After disabling Strict Mode, it works fine with dev as well.