Upgrade to use Node.js 20 and bump npm dependencies

eason9487 commented 1 month ago

Changes proposed in this Pull Request:

Closes #2002

This PR:

Bump npm dependencies and upgrade to use Node.js v20.
Fix the build config of Fast Refresh mode.
Address Sass deprecation warnings.
- Ref: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
Turn off a few eslint rules:
- react/react-in-jsx-scope rule
- jsdoc/check-line-alignment rule
- import/no-named-as-default rule
Resolve eslint errors: (💡 It would be easier to review the changes by individual commits)
Automatically fixed errors by running npm run lint:js -- --fix: c41ef64
@wordpress/i18n-text-domain rule: cdd9aab
jsdoc/no-undefined-types rule: 67ef0e2
import/no-unresolved rule: c4db2a3
no-redeclare rule: 6997b6f
jsdoc/require-yields-check rule: 47d1f9f
@typescript-eslint/no-use-before-define rule: 9886344
jsdoc/tag-lines rule: fccc0cd

❗ Since the jest testing requires a lot of adjustments, it will be handled by #2544. Two of the eslint rule errors are highly related to jest and are therefore handled by #2544 as well.

Detailed test instructions:

Set Node.js to v20
Run npm install to see if it can finish without errors
Check if the following scripts work well
- npm run build
- npm run dev
- npm run start
- npm run start:hot
- npm run lint:css
- npm run lint:js
  - There are two pre-existing warnings that still can not be fixed after this upgrade
  - Errors from the testing-library/no-unnecessary-act and testing-library/no-unnecessary-act rules are handled separately in #2544
Run node ./node_modules/.bin/bundlewatch to check if the check works
Do some smoke testing