[docs] $contactId vs $id inconsistency in website tutorial

[iancleary]

Reproduction

Follow the tutorial

npx create-remix@latest --template remix-run/remix/templates/remix-tutorial

compare the route $contactId versus id field in the data.tsx file

System Info

npx envinfo --system --npmPackages '{vite,@remix-run/*}' --binaries --browsers                                                                          
Need to install the following packages:
envinfo@7.13.0
Ok to proceed? (y) y

  System:
    OS: Linux 6.6 NixOS 24.05 (Uakari) 24.05 (Uakari)
    CPU: (16) x64 AMD Ryzen 7 7840U w/ Radeon  780M Graphics
    Memory: 20.12 GB / 27.22 GB
    Container: Yes
    Shell: 5.9 - /run/current-system/sw/bin/zsh
  Binaries:
    Node: 22.2.0 - /nix/store/72m3szv59j74b12dmicmayvvlikh65qc-nodejs-22.2.0/bin/node
    npm: 10.7.0 - /nix/store/72m3szv59j74b12dmicmayvvlikh65qc-nodejs-22.2.0/bin/npm
    pnpm: 8.15.5 - /nix/store/d8iha1pz112nyxhp3kl97l7xzfnqhpxw-pnpm-8.15.5/bin/pnpm
  Browsers:
    Brave Browser: 127.1.68.141
  npmPackages:
    @remix-run/dev: ^2.11.2 => 2.11.2
    @remix-run/node: ^2.11.2 => 2.11.2
    @remix-run/react: ^2.11.2 => 2.11.2
    @remix-run/serve: ^2.11.2 => 2.11.2
    vite: ^5.1.4 => 5.4.3

Used Package Manager

pnpm

Expected Behavior

http://localhost:5173/contacts/alex-anderson resolves to find the contact by contactId

Actual Behavior

the tutorial fails to find params.contactId, since the data.tsx file uses id and not contactId as a

[iancleary]

personally I prefer contact to have an id field and not a contactId field, so I'd recommend the tutorial be updated to just use $id as the dynamic route parameter for contact and contact edit.

The request/bug is that they are not consistent and they should be.

[iancleary]

Specifically https://remix.run/docs/en/main/start/tutorial#loading-data is when the conflict starts

[iancleary]

Great work on remix, with the exception of the suspected bug, it seems (as someone who isn't primarily a front end developer) very well done. Thanks for everything you all do :)

[iancleary]

Perhaps it's something with the parameter parsing, since $id in the file name worked fine, but it looks like the $contactId param should pass through just fine to the function to get a contact by id. Not sure why I had an issue

[pbpeterson]

Perhaps it's something with the parameter parsing, since $id in the file name worked fine, but it looks like the $contactId param should pass through just fine to the function to get a contact by id. Not sure why I had an issue

Can you share a github repo with this issue?

[iancleary]

I don't think there is a bug.

I think I messed up the spelling of contactId between the name field on the params and the name of the file in the routes folder. My git local history didn't capture my mistake, but if I had to guess, I had something like contactID in the filename (emphasis on capital D instead of lower case d). The app did show the error stack trace, but the tutorial doesn't show what that looks like, so I got derailed due to my suspected typo.

FWIW: https://github.com/iancleary/remix-tutorial-issue-9960/tree/main/app/routes is a repo without this issue.