Upgrade us to use the latest versions of NodeJS and Babel #2304

jrobbins · 2022-10-06T18:30:05Z

Is your feature request related to a problem? Please describe.
Our current README.md says to use 12, whereas the current version is 16. This makes it more difficult for potential developers to set up a development environment.

Also, we have been declining PRs suggested by dependbot because they cause JS compilation errors. They depend on newer versions of Node, Babel, or other JS libraries. These PRs are often triggered by reported security vulnerabilities, so by declining them our app is left vulnerable.

Also, we don't seem to be able to use recent JS language features, for example the questionmark-dot operator.

Describe the solution you'd like
Get our app working on the latest version of Node, Babel, and do any needed JS library upgrades. Update README.md to tell potential developers that they can use the latest version of Node, or name a specific Node version that it current now.

jcscottiii · 2022-10-21T15:37:56Z

Taking notes for myself:

Going to node 18.
It will be going into LTS on October 25.

Migrating from node-sass to sass.
node-sass uses libsass. both are deprecated [2]
Why migrate? When using node-sass with gulp-sass, I get this message now with the new node version: https://stackoverflow.com/questions/66173984/unable-to-install-gulp-sass-on-npm-version-7-5-1

Upgrading gulp-sass to 5.1.0 fixes the problem without having to change node-sass. But npm install takes a lot longer.

Installation with node-sass takes 2m 50s (has to compile it)
sass is javascript native implementation. installation with it takes 12 secs

Getting conflicting dependency warnings
npm/cli#3083 (comment)
Had to delete package-lock.json and node_modules and do a raw npm install
^ This is going to cause the bulk of the "changes" in the PR

Running npm outdated:

Package                      Current  Wanted  Latest  Location                                  Depended by
@web/test-runner              0.14.1  0.14.1  0.15.0  node_modules/@web/test-runner             workspace
@web/test-runner-playwright   0.8.10  0.8.10   0.9.0  node_modules/@web/test-runner-playwright  workspace
del                            3.0.0   3.0.0   7.0.0  node_modules/del                          workspace
eslint                        5.16.0  5.16.0  8.25.0  node_modules/eslint                       workspace
rollup                        1.32.1  1.32.1   3.2.3  node_modules/rollup                       workspace
rollup-plugin-babel-minify     9.1.1   9.1.1  10.0.0  node_modules/rollup-plugin-babel-minify   workspace
rollup-plugin-lit-css          2.1.0   2.1.0   4.0.0  node_modules/rollup-plugin-lit-css        workspace

rollup-plugin-babel-minify is deprecated in favor of rollup-plugin-terser

[17:21:41] Requiring external module @babel/register
Error [ERR_REQUIRE_ESM]: require() of ES Module /workspace/node_modules/del/index.js from /workspace/gulpfile.babel.js not supported.
Instead change the require of index.js in /workspace/gulpfile.babel.js to a dynamic import() which is available in all CommonJS modules.
    at Object.newLoader [as .js] (/workspace/node_modules/pirates/lib/index.js:141:7)
    at Object.<anonymous> (/workspace/gulpfile.babel.js:8:11)
    at Module._compile (/workspace/node_modules/pirates/lib/index.js:136:24)
    at Object.newLoader [as .js] (/workspace/node_modules/pirates/lib/index.js:141:7)
    at async Promise.all (index 0) {
  code: 'ERR_REQUIRE_ESM'

Need to migrate the gulpfile to use ESM https://gist.github.com/noraj/007a943dc781dc8dd3198a29205bae04

This means no more use of require is allowed. Have to switch to import

TypeError: Cannot read properties of undefined (reading 'filename')
at module.exports (/workspace/node_modules/gulp-load-plugins/index.js:48:93)
at file:///workspace/gulpfile.babel.js:37:11
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)

As a result, did not lazy load plugins anymore.

chromium-dashboard/gulpfile.babel.js

Line 92 in df8849c

rollupLitCss({include: []}),

Need to verify that this is no longer needed.

Looks like I don't need it. With it, I get some circular dependency errors.

sw-precache is using a vulnerable version of meow

https://www.npmjs.com/package/sw-precache
https://developer.chrome.com/docs/workbox/migration/migrate-from-sw/

Turns out it was introduced here: bf8550d
Was removed here:
53a92ed
can remove dependency

node_modules/got
package-json <=6.5.0
Depends on vulnerable versions of got
node_modules/package-json
latest-version 0.2.0 - 5.1.0
Depends on vulnerable versions of package-json
node_modules/latest-version
update-notifier 0.2.0 - 5.1.0
Depends on vulnerable versions of latest-version
node_modules/update-notifier
http2-push-manifest *
Depends on vulnerable versions of update-notifier
node_modules/http2-push-manifest

http2-push-manifest is not used anymore. can remove

Remaining deprecation notices:

npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated rollup-plugin-babel-minify@10.0.0: Please use rollup-plugin-terser instead.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated gulp-util@1.0.0: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated gulp-minify-html@0.1.0: Please use gulp-htmlmin
npm WARN deprecated sw-toolbox@3.6.0: Please migrate to Workbox: https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw

gulp-util is no longer used.

$ npm ls gulp-util
chromestatus-dashboard@ /workspace
└── gulp-util@1.0.0

gulp-minify-html is no longer used

rollup-plugin-lit-css is no longer used because the code now does styles the way mentioned in the docs: importing from .js files. The old way that used this plugin imported from css files.

sw-toolbox is no longer used

rollup-plugin-babel-minify uses babel-minify which is experimental. rollup-plugin-babel-minify recommends to use rollup-plugin-terser now but will wait until this PR: rollup/plugins#1323

Good stopping point.

$ npm install
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated rollup-plugin-babel-minify@10.0.0: Please use rollup-plugin-terser instead.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

added 1127 packages, and audited 1128 packages in 10s

93 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Recommend getting rid of gulp by the way. a lot of the deprecation notices are due to gulp.

Upon running all the commands in gulp, get this:

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($content-padding, 2) or calc($content-padding / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
75 │   margin-bottom: $content-padding / 2;
   │                  ^^^^^^^^^^^^^^^^^^^^
   ╵
    client-src/sass/blink.scss 75:18  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($content-padding, 2) or calc($content-padding / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
84 │   margin-left: $content-padding / 2;
   │                ^^^^^^^^^^^^^^^^^^^^
   ╵
    client-src/sass/blink.scss 84:16  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($content-padding, 2) or calc($content-padding / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
68 │     margin: $content-padding / 2 0;
   │             ^^^^^^^^^^^^^^^^^^^^
   ╵
    client-src/sass/forms.scss 68:13  root stylesheet

Will not handle this. instead will create a bug for @jrobbins suggestion to phase out sass

jrobbins · 2022-10-21T17:30:33Z

I'd also like to phase out our use of SASS, because we don't use much of it. We've already converted almost all of it to lit-css.
I'll leave it up to you if you want to upgrade SASS as part of this work or phase it out to avoid the need to upgrade.

jrobbins added the enhancement label Oct 6, 2022

jrobbins assigned jcscottiii Oct 6, 2022

jrobbins added this to the 2022 Q4 Dec milestone Oct 13, 2022

This was referenced Oct 21, 2022

Node v18. Upgrade frontend dependencies and resolve vulns #2380

Merged

Replace gulp #2383

Open

Phase out sass #2384

Open

jcscottiii closed this as completed in #2380 Oct 25, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade us to use the latest versions of NodeJS and Babel #2304

Upgrade us to use the latest versions of NodeJS and Babel #2304

jrobbins commented Oct 6, 2022

jcscottiii commented Oct 21, 2022 •

edited

Loading

jrobbins commented Oct 21, 2022

Upgrade us to use the latest versions of NodeJS and Babel #2304

Upgrade us to use the latest versions of NodeJS and Babel #2304

Comments

jrobbins commented Oct 6, 2022

jcscottiii commented Oct 21, 2022 • edited Loading

jrobbins commented Oct 21, 2022

jcscottiii commented Oct 21, 2022 •

edited

Loading