jcscottiii
commented
2 years ago 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 https://github.com/npm/cli/issues/3083#issuecomment-820387637 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 workspacerollup-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.
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: https://github.com/GoogleChrome/chromium-dashboard/commit/bf8550daeaf9953d4e4a1bb839ca7defa0c7fe8b Was removed here: https://github.com/GoogleChrome/chromium-dashboard/commit/53a92edd2b65485259777341d855ca243ef62053 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.0gulp-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: https://github.com/rollup/plugins/pull/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 vulnerabilitiesRecommend 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 stylesheetWill not handle this. instead will create a bug for @jrobbins suggestion to phase out sass
jrobbins
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.