Upgrade node deps #14124

brianjhanson · 2024-01-10T21:46:54Z

Updates most packages to the latest versions and node version to 20.

Not yet updated

Vue — Going from 2 -> 3 will need a bit of a migration path
Fabric — powers the asset image editor. I'm still planning to update this, but it needs more care
GraphiQL — Same as Fabric. I plan to update this, but the changes are more substantial

Removed

Whatwg-fetch (https://www.npmjs.com/package/whatwg-fetch) - fetch is widely available now
event-stream (https://www.npmjs.com/package/event-stream) - looks to be leftover from the old grunt build

Can we remove?

Punycode — Used in ApplicationTrait. The @bower/punycode doesn't appear to be used anywhere.

Fixes CMS-1100

I wanted to go up to 20, but there are some deprecations that are a little more involved. Still hoping to get there by the end of this PR though.

Prettier uses an exact version because every formatting change is essentially a breaking change. https://prettier.io/docs/en/install#summary

linear · 2024-01-10T21:46:58Z

CMS-1202 Upgrade node deps

linear · 2024-01-10T21:49:53Z

CMS-1100 Update browserslist & browser requirements to be dynamic

brandonkelly · 2024-01-11T23:06:25Z

Getting the following error when I try running nvm run build:

admintable:
  assets by status 6.63 KiB [cached] 2 assets
  ./main.js 39 bytes [built] [code generated] [1 error]

  ERROR in ./main.js
  Module build failed (from ../node_modules/babel-loader/lib/index.js):
  Error: /Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/src/main.js: You gave us a visitor for the node type StaticBlock but it's not a valid type
      at verify (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/visitors.js:112:13)
      at Object.explode (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/visitors.js:34:3)
      at traverse (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/index.js:63:12)
      at NodePath.traverse (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/path/index.js:148:24)
      at memberExpressionToFunctions (/Volumes/Dev/craft5/cms/repos/cms/node_modules/@babel/helper-member-expression-to-functions/lib/index.js:391:8)
      at ReplaceSupers.replace (/Volumes/Dev/craft5/cms/repos/cms/node_modules/@babel/helper-replace-supers/lib/index.js:213:52)
      at replacePropertySuper (/Volumes/Dev/craft5/cms/repos/cms/node_modules/@babel/plugin-transform-object-super/lib/index.js:16:17)
      at /Volumes/Dev/craft5/cms/repos/cms/node_modules/@babel/plugin-transform-object-super/lib/index.js:44:11
      at Array.forEach (<anonymous>)
      at PluginPass.ObjectExpression (/Volumes/Dev/craft5/cms/repos/cms/node_modules/@babel/plugin-transform-object-super/lib/index.js:42:32)
      at newFn (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/visitors.js:175:21)
      at NodePath._call (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/path/context.js:55:20)
      at NodePath.call (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/path/context.js:42:17)
      at NodePath.visit (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/path/context.js:90:31)
      at TraversalContext.visitQueue (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:112:16)
      at TraversalContext.visitMultiple (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:79:17)
      at TraversalContext.visit (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:138:19)
      at traverse.node (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/index.js:82:17)
      at NodePath.visit (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/path/context.js:97:18)
      at TraversalContext.visitQueue (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:112:16)
      at TraversalContext.visitSingle (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:84:19)
      at TraversalContext.visit (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:140:19)
      at traverse.node (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/index.js:82:17)
      at NodePath.visit (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/path/context.js:97:18)
      at TraversalContext.visitQueue (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:112:16)
      at TraversalContext.visitSingle (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:84:19)
      at TraversalContext.visit (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:140:19)
      at traverse.node (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/index.js:82:17)
      at NodePath.visit (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/path/context.js:97:18)
      at TraversalContext.visitQueue (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:112:16)
      at TraversalContext.visitMultiple (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:79:17)
      at TraversalContext.visit (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:138:19)
      at traverse.node (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/index.js:82:17)
      at NodePath.visit (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/path/context.js:97:18)
      at TraversalContext.visitQueue (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:112:16)
      at TraversalContext.visitSingle (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:84:19)
      at TraversalContext.visit (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:140:19)
      at traverse.node (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/index.js:82:17)
      at traverse (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/index.js:64:12)
      at transformFile (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/core/lib/transformation/index.js:107:29)
      at transformFile.next (<anonymous>)
      at run (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/core/lib/transformation/index.js:35:12)
      at run.next (<anonymous>)
      at Function.transform (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/core/lib/transform.js:27:41)
      at transform.next (<anonymous>)
      at step (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/gensync/index.js:254:32)
      at /Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/gensync/index.js:266:13
      at async.call.result.err.err (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/gensync/index.js:216:11)
      at /Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/gensync/index.js:184:28
      at /Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/core/lib/gensync-utils/async.js:72:7

  admintable (webpack 5.89.0) compiled with 1 error in 3617 ms

And this when I try building admintable individually:

admintable:
  assets by status 1.54 KiB [cached] 2 assets
  ./main.js 39 bytes [built] [code generated] [1 error]

  ERROR in ./main.js
  Module build failed (from ../node_modules/babel-loader/lib/index.js):
  /Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/context.js:138
  build      return this.visitMultiple(nodes, node, key);
             ^^^^^^

  SyntaxError: Unexpected token 'return'
      at internalCompileFunction (node:internal/vm:77:18)
      at wrapSafe (node:internal/modules/cjs/loader:1288:20)
      at Module._compile (node:internal/modules/cjs/loader:1340:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
      at Module.load (node:internal/modules/cjs/loader:1207:32)
      at Module._load (node:internal/modules/cjs/loader:1023:12)
      at Module.require (node:internal/modules/cjs/loader:1235:19)
      at require (node:internal/modules/helpers:176:18)
      at Object.<anonymous> (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/traverse/lib/index.js:27:39)
      at Module._compile (node:internal/modules/cjs/loader:1376:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
      at Module.load (node:internal/modules/cjs/loader:1207:32)
      at Module._load (node:internal/modules/cjs/loader:1023:12)
      at Module.require (node:internal/modules/cjs/loader:1235:19)
      at require (node:internal/modules/helpers:176:18)
      at _traverse (/Volumes/Dev/craft5/cms/repos/cms/src/web/assets/admintable/node_modules/@babel/core/lib/index.js:215:39)

  admintable (webpack 5.89.0) compiled with 1 error in 343 ms

brianjhanson · 2024-01-12T01:30:14Z

🤔 it seems to be working on my end.

> build
> webpack --node-env=production --progress --config-name=admintable

admintable:
  asset js/app.js 166 KiB [emitted] [minimized] (name: app) 2 related assets
  asset css/app.css 1.85 KiB [emitted] [minimized] (name: app) 1 related asset
  asset manifest.json 111 bytes [emitted] [minimized]
  Entrypoint app 168 KiB (1 MiB) = css/app.css 1.85 KiB js/app.js 166 KiB 2 auxiliary assets
  orphan modules 237 KiB (javascript) 3.89 KiB (runtime) [orphan] 84 modules
  runtime modules 1.04 KiB 5 modules
  built modules 767 KiB (javascript) 1.83 KiB (css/mini-extract) [built]
    javascript modules 767 KiB
      modules by path ../../../../../packages/craftcms-vue/admintable/ 2.89 KiB 6 modules
      modules by path ../../../../../node_modules/ 539 KiB
        modules by path ../../../../../node_modules/vuetable-2/src/components/*.vue 882 bytes 2 modules
        + 2 modules
      ./main.js + 51 modules 226 KiB [not cacheable] [built] [code generated]
    css modules 1.83 KiB
      modules by path ../../../../../packages/craftcms-vue/admintable/components/*.vue 142 bytes
        css ../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[3]!../../../../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[4]!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../../packages/craftcms-vue/admintable/components/AdminTableCheckbox.vu...(truncated) 54 bytes [built] [code generated]
        css ../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[3]!../../../../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[4]!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../../packages/craftcms-vue/admintable/components/AdminTableDetailRow.v...(truncated) 88 bytes [built] [code generated]
      css ../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[3]!../../../../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[4]!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../../packages/craftcms-vue/admintable/App.vue?vue&type=style&index=0&i...(truncated) 817 bytes [built] [code generated]
      css ../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[3]!../../../../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[4]!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../../node_modules/vuetable-2/src/components/Vuetable.vue?vue&type=styl...(truncated) 910 bytes [built] [code generated]
  admintable (webpack 5.89.0) compiled successfully in 2910 ms

Anything about your env that might be different from mine?

Are you running in DDEV or outside (or other)?
Are you using the node version from the .nvmrc (v20.10.0)?
Did you run npm i or npm ci to install new dependencies?

You might be running into this. I know we're not using storybook, but that issue doesn't seem specific to Storybook itself. If you are running into that one, running npm ci should resolve it.

…pgrade-node-deps

brandonkelly · 2024-01-12T04:51:19Z

Are you running in DDEV or outside (or other)?

From the host (Sonoma)

Are you using the node version from the .nvmrc (v20.10.0)?

Yes; installed 20.10.0 and ran nvm use, and it was successful.

Did you run npm i or npm ci to install new dependencies?

npm ci, which appeared successful.

brandonkelly · 2024-01-12T14:18:52Z

Fixed. There was a rogue node_modules folder in src/web/assets/admintable. Deleted it and now build works.

Noticing several JS errors when interacting with the New Users widget, though, proboably related to the D3 upgrade.

[ci skip]

brianjhanson added 22 commits January 9, 2024 15:34

Update browserslist config

6e66478

Fixes CMS-1100

Rebuild

b16418e

Bump node version

f773e57

I wanted to go up to 20, but there are some deprecations that are a little more involved. Still hoping to get there by the end of this PR though.

Easy updates

462fa9d

Rebuild

7423604

Update Axios to 1.6.5

4c43adf

Update copy-webpack-plugin

f6ad3d0

Update D3

da8c0cc

Remove event-stream

21ecca2

Update Husky

54ee8ed

Node 20

4ffcc89

Update lint-staged

5ebbbfc

Update Prettier

307dc21

Prettier uses an exact version because every formatting change is essentially a breaking change. https://prettier.io/docs/en/install#summary

Update punycode

85fd748

Update Typescript

e942c86

Remove whatwg-fetch

84b2dab

Update xregexp

06642c9

Rebuild

287d106

Remove errant package

62af0ad

Update webpack packages

9d98fc3

Rebuild

8e89982

Add engines key

4a08ab9

Merge branch '5.0' of github.com:craftcms/cms into feature/cms-1202-u…

d3b71f7

…pgrade-node-deps

Fix D3 issues

416d2fe

brianjhanson added 2 commits January 12, 2024 10:03

Rebuild

56ca224

Update Chart.js

d18c06b

timkelty mentioned this pull request Jan 12, 2024

Upgrade d3 #11090

Closed

brianjhanson and others added 2 commits January 12, 2024 10:40

Cleanup d3 global

4278178

Release notes

0f9c9ef

[ci skip]

brandonkelly merged commit d3c9547 into 5.0 Jan 12, 2024

brandonkelly deleted the feature/cms-1202-upgrade-node-deps branch January 12, 2024 17:30

This was referenced Jan 12, 2024

[Snyk] Upgrade vue from 2.6.14 to 2.7.4 #11720

Closed

[Snyk] Upgrade typescript from 4.7.4 to 4.8.2 #11956

Closed

[Snyk] Upgrade jquery from 3.6.0 to 3.6.1 #11964

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade node deps #14124

Upgrade node deps #14124

brianjhanson commented Jan 10, 2024 •

edited

linear bot commented Jan 10, 2024

linear bot commented Jan 10, 2024

brandonkelly commented Jan 11, 2024

brianjhanson commented Jan 12, 2024

brandonkelly commented Jan 12, 2024

brandonkelly commented Jan 12, 2024

Upgrade node deps #14124

Upgrade node deps #14124

Conversation

brianjhanson commented Jan 10, 2024 • edited

Not yet updated

Removed

Can we remove?

linear bot commented Jan 10, 2024

linear bot commented Jan 10, 2024

brandonkelly commented Jan 11, 2024

brianjhanson commented Jan 12, 2024

brandonkelly commented Jan 12, 2024

brandonkelly commented Jan 12, 2024

brianjhanson commented Jan 10, 2024 •

edited