[Tools] Deprecated packages and links, issue about parcel auto installation, wrong path in /src/index.css

[devusexu]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain

What specific section or headline is this issue about?

Tools used in our toolchain; Installing our tools; Build and transformation tools; Running the transformation

What information was incorrect, unhelpful, or incomplete?

1. JSX introduction site deprecated, new site at Writing Markup with JSX & JavaScript in JSX with Curly Braces
2. babel-eslint deprecated, now @babel/eslint-parser
3. parcel-bundler deprecated. Can't even npm install it now
4. command npx parcel src/index.html failed

TL;DR

• Install the packages which should be auto installed by parcel on your own
• Change the file path in /src/index.css;

Below is the process of debugging. First run the command npx parcel src/index.html and an error occurred

🚨 Build failed.
@parcel/transformer-js: Expression expected

As the parcel auto installation issue I posted #28080 , parcel didn't auto install react, react-dom, react-async-hook, date-fns, and format-number for me like the tutorial said.
So I install them on my own and encounter next little problem, the wrong path of svg file

Changing absolute path '/img/filename.svg' to relative path 'img/filename.svg' solved the issue while next error occurred

🚨 Build failed.
Error: Expected content key 37a1035e8011b3a1 to exist

Easy, just delete the cache directory of parcel by running rm -r .parcel-cache
Now parcel build successfully, damn the auto installation!
I need to mention that I also change babel-eslint(now deprecated) to @babal/core and @babel/eslint-parser, not sure if that makes any difference

What did you expect to see?

1. viable packages
2. parcel build successfully

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

My environment:
Windows 11 / Ubuntu 22.04.2 LTS run on WSL
node: v18.17.0 / v20.4.0
parcel: 2.9.3

MDN metadata

Page report details

• Folder: en-us/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md
• Last commit: 985ae59
• Document last modified: 2023-07-10T16:35:16.000Z

[devusexu]

Although it worked during development, it failed when I deploy with Netlify (page loaded without the main content, reporting some function went wrong in the console).
So I gave up following the rest of the tutorial.