2/x Bump NodeJS supported versions to ^16.16 || ^18.13 (#8201)

### WHY are these changes introduced? NodeJS 14 is EOL and we are removing support in v11. We currently set `engines` on the root `package.json`. The problem with this is that consumers of the library do not get this information and they can use the libraries without any warning of what version of NodeJS it supports. ### WHAT is this pull request doing? - [x] Increasing the supported versions of NodeJS - [x] Add the engines field for NodeJS to package.json files I would like to get NodeJS to version 16.19 before we launch version 11. However there is an issue with babel/rollup/browserslist not finding the latest version of NodeJS: ``` (plugin babel) BrowserslistError: Unknown version 16.19 of Node.js ``` ### How to 🎩 - CI completes successfully
Shopify · Jan 30, 2023 · 89c8ae4 · 89c8ae4
1 parent ff6248c
commit 89c8ae4
Show file tree

Hide file tree

Showing 24 changed files with 60 additions and 63 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -116,12 +116,6 @@ module.exports = {
         'import/extensions': 'off',
         'import/no-default-export': 'off',
         'import/no-anonymous-default-export': 'off',
-        // We could omit this if we set `engines` fields properly
-        // As we don't set them then eslint thinks we're using node 8
-        'node/no-unsupported-features/node-builtins': [
-          'error',
-          {version: '>=16.0.0'},
-        ],
       },
     },
     {

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -137,7 +137,7 @@ Each contributor is required to [sign a CLA](https://cla.shopify.com/). This pro
 
 ### Contribution prerequisites
 
-- You have Node installed at v16.13.0+ and Yarn at v1.22.18+
+- You have Node installed at v18.13.0+ and Yarn at v1.22.18+
 
 ### Best practices
 

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
@@ -21,10 +21,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Setup Node with v16.13.0
+      - name: Setup Node with v18.13.0
         uses: actions/setup-node@v3
         with:
-          node-version: 16.13.0
+          node-version: 18.13.0
 
       - name: Check for Changeset
         run: npx @changesets/cli status --since="origin/main"
diff --git a/.github/workflows/ci-a11y-vrt.yml b/.github/workflows/ci-a11y-vrt.yml
@@ -32,10 +32,10 @@ jobs:
           sudo rm -rf "/usr/local/share/boost"
           sudo rm -rf "$AGENT_TOOLSDIRECTORY"
 
-      - name: Setup Node with v16.13.0
+      - name: Setup Node with v18.13.0
         uses: actions/setup-node@v3
         with:
-          node-version: 16.13.0
+          node-version: 18.13.0
           cache: yarn
 
       - name: Restore cache
@@ -72,10 +72,10 @@ jobs:
         with:
           fetch-depth: 0 # Chromatic git history to track changes
 
-      - name: Setup Node with v16.13.0
+      - name: Setup Node with v18.13.0
         uses: actions/setup-node@v3
         with:
-          node-version: 16.13.0
+          node-version: 18.13.0
           cache: yarn
 
       - name: Restore cache

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['14.18.0', '16.13.0']
+        node-version: ['16.16.0', '18.13.0']
     steps:
       - name: Checkout branch
         uses: actions/checkout@v3

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.13.0
+v18.13.0
diff --git a/dev.yml b/dev.yml
@@ -2,7 +2,7 @@ name: polaris
 up:
   - node:
       yarn: v1.22.18
-      version: v16.13.0 # to be kept in sync with .nvmrc and .github/workflows/ci.yml
+      version: v18.13.0 # to be kept in sync with .nvmrc and .github/workflows/ci.yml
   - custom:
       name: Build monorepo
       met?: yarn build --output-logs=none

diff --git a/documentation/Nodejs support.md b/documentation/Nodejs support.md
@@ -16,38 +16,40 @@ The `package.json` engines. This should match the `.github/workflows/ci.yml` and
 
 ```json
 "engines": {
-  "node": "^14.18.0 || ^16.13.0"
+  "node": "^16.16.0 || ^18.13.0"
 },
 ```
 
 The GitHub actions `.github/workflows/ci.yml` file. This should match the `package.json` and list all supported versions.
 
 ```yml
-node-version: ['14.18.0', '16.13.0']
+node-version: ['16.16.0', '18.13.0']
 ```
 
 The `dev.yml` file which creates a local development environment. This should match the `.nvmrc` file.
 
 ```yml
-version: v16.13.0
+version: v18.13.0
 ```
 
 The `.nvmrc` file for local development. This should match the `dev.yml` file.
 
 ```
-v16.13.0
+v18.13.0
 ```
 
 The `shipit.yml` files. This should point towards the GitHub Actions the packages require to pass before publishing.
 
 ```yml
 ci:
   require:
-    - 'Validate with Node v14.18.0'
-    - 'Validate with Node v16.13.0'
+    - 'Validate with Node v16.16.0'
+    - 'Validate with Node v18.13.0'
 
 merge:
   require:
-    - 'Validate with Node v14.18.0'
-    - 'Validate with Node v16.13.0'
+    - 'Validate with Node v16.16.0'
+    - 'Validate with Node v18.13.0'
 ```
+
+The `rollup.config.mjs` for some monorepo packages. This should match the minimum supported version.
diff --git a/documentation/guides/migrating-from-v10-to-v11.md b/documentation/guides/migrating-from-v10-to-v11.md
@@ -4,11 +4,16 @@ Polaris v11.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 
 ## Table of Contents
 
+- [Node support](#node-support)
 - [Components](#components)
   - [Removed deprecated Collapsible argument](#removed-deprecated-collapsible-argument)
   - [Removed KonamiCode component](#removed-konamicode-component)
 - [Tokens](#tokens)
 
+## Node support
+
+NodeJS version 14 is no longer supported. NodeJS 18 is recommended and 16 is the minimum supported version.
+
 ## Components
 
 ### Removed deprecated Collapsible argument

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "engines": {
-    "node": "^14.18.0 || ^16.13.0"
+    "node": "^16.16.0 || ^18.13.0"
   },
   "workspaces": {
     "packages": [
@@ -67,6 +67,7 @@
     "@shopify/typescript-configs": "^5.1.0",
     "@size-limit/preset-small-lib": "^5.0.3",
     "@types/jest": "^27.5.1",
+    "@types/node": "^18.11.18",
     "babel-loader": "^9.1.2",
     "downlevel-dts": "^0.6.0",
     "eslint": "^8.3.0",

diff --git a/polaris-cli/package.json b/polaris-cli/package.json
@@ -31,7 +31,7 @@
   },
   "engine-strict": true,
   "engines": {
-    "node": ">=14.13.1"
+    "node": "^16.16.0 || ^18.13.0"
   },
   "os": [
     "darwin",

diff --git a/polaris-for-vscode/package.json b/polaris-for-vscode/package.json
@@ -20,7 +20,7 @@
     "shopify"
   ],
   "engines": {
-    "vscode": "^1.64.0"
+    "node": "^16.16.0 || ^18.13.0"
   },
   "categories": [
     "Other"
@@ -43,7 +43,6 @@
   },
   "devDependencies": {
     "@shopify/polaris-tokens": "^6.3.0",
-    "@types/node": "14.x",
     "@types/vscode": "^1.64.0",
     "@vscode/test-electron": "^2.1.2",
     "globby": "^11.1.0",

diff --git a/polaris-icons/package.json b/polaris-icons/package.json
@@ -13,6 +13,9 @@
       ]
     }
   },
+  "engines": {
+    "node": "^16.16.0 || ^18.13.0"
+  },
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json
@@ -6,6 +6,9 @@
   "author": "Shopify <[email protected]>",
   "homepage": "https://polaris.shopify.com",
   "repository": "https://github.com/Shopify/polaris",
+  "engines": {
+    "node": "^16.16.0 || ^18.13.0"
+  },
   "bugs": {
     "url": "https://github.com/Shopify/polaris/issues"
   },

diff --git a/polaris-migrator/rollup.config.mjs b/polaris-migrator/rollup.config.mjs
@@ -45,7 +45,7 @@ export default {
       include: ['src/**/*'],
       babelHelpers: 'bundled',
       envName: 'production',
-      targets: 'node 14.13',
+      targets: 'node 16.16.0',
     }),
     json({compact: true}),
   ],

diff --git a/polaris-react/package.json b/polaris-react/package.json
@@ -10,6 +10,9 @@
   "bugs": {
     "url": "https://github.com/Shopify/polaris/issues"
   },
+  "engines": {
+    "node": "^16.16.0 || ^18.13.0"
+  },
   "publishConfig": {
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
@@ -87,7 +90,6 @@
     "@storybook/builder-webpack5": "^6.5.12",
     "@storybook/manager-webpack5": "^6.5.12",
     "@storybook/react": "^6.5.12",
-    "@types/node": "^16.11.11",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "ajv-cli": "^5.0.0",

diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
@@ -527,8 +527,7 @@ export function DetailsPage() {
             alt={file.name}
             source={
               validImageTypes.indexOf(file.type) > 0
-                ? // eslint-disable-next-line node/no-unsupported-features/node-builtins
-                  URL.createObjectURL(file)
+                ? URL.createObjectURL(file)
                 : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304'
             }
           />

diff --git a/polaris-react/rollup.config.mjs b/polaris-react/rollup.config.mjs
@@ -54,7 +54,7 @@ function generateConfig({output, targets, stylesConfig}) {
 /** @type {import('rollup').RollupOptions} */
 export default [
   generateConfig({
-    targets: 'extends @shopify/browserslist-config, node 12.20',
+    targets: 'extends @shopify/browserslist-config, node 16.16.0',
     stylesConfig: {
       mode: 'standalone',
       output: 'styles.css',

diff --git a/polaris-react/scripts/build-validate.js b/polaris-react/scripts/build-validate.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line node/no-unsupported-features/node-builtins
 const assert = require('assert').strict;
 const fs = require('fs');
 

diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx
@@ -38,8 +38,7 @@ export function Default() {
               alt={file.name}
               source={
                 validImageTypes.includes(file.type)
-                  ? // eslint-disable-next-line node/no-unsupported-features/node-builtins
-                    window.URL.createObjectURL(file)
+                  ? window.URL.createObjectURL(file)
                   : NoteMinor
               }
             />
@@ -92,7 +91,6 @@ export function WithImageFileUpload() {
           <Thumbnail
             size="small"
             alt={file.name}
-            // eslint-disable-next-line node/no-unsupported-features/node-builtins
             source={window.URL.createObjectURL(file)}
           />
           <div>
@@ -151,8 +149,7 @@ export function WithSingleFileUpload() {
         alt={file.name}
         source={
           validImageTypes.includes(file.type)
-            ? // eslint-disable-next-line node/no-unsupported-features/node-builtins
-              window.URL.createObjectURL(file)
+            ? window.URL.createObjectURL(file)
             : NoteMinor
         }
       />
@@ -193,8 +190,7 @@ export function WithDropOnPage() {
             alt={file.name}
             source={
               validImageTypes.includes(file.type)
-                ? // eslint-disable-next-line node/no-unsupported-features/node-builtins
-                  window.URL.createObjectURL(file)
+                ? window.URL.createObjectURL(file)
                 : NoteMinor
             }
           />
@@ -253,7 +249,6 @@ export function AcceptsOnlySVGFiles() {
           <Thumbnail
             size="small"
             alt={file.name}
-            // eslint-disable-next-line node/no-unsupported-features/node-builtins
             source={window.URL.createObjectURL(file)}
           />
           <div>
@@ -318,8 +313,7 @@ export function Nested() {
             alt={file.name}
             source={
               validImageTypes.includes(file.type)
-                ? // eslint-disable-next-line node/no-unsupported-features/node-builtins
-                  window.URL.createObjectURL(file)
+                ? window.URL.createObjectURL(file)
                 : NoteMinor
             }
           />
@@ -390,8 +384,7 @@ export function WithCustomFileUploadText() {
             alt={file.name}
             source={
               validImageTypes.includes(file.type)
-                ? // eslint-disable-next-line node/no-unsupported-features/node-builtins
-                  window.URL.createObjectURL(file)
+                ? window.URL.createObjectURL(file)
                 : NoteMinor
             }
           />
@@ -439,8 +432,7 @@ export function WithCustomFileDialogTrigger() {
             alt={file.name}
             source={
               validImageTypes.includes(file.type)
-                ? // eslint-disable-next-line node/no-unsupported-features/node-builtins
-                  window.URL.createObjectURL(file)
+                ? window.URL.createObjectURL(file)
                 : NoteMinor
             }
           />

diff --git a/polaris-tokens/package.json b/polaris-tokens/package.json
@@ -5,6 +5,9 @@
   "main": "dist/cjs/build/index.js",
   "module": "dist/esm/build/index.mjs",
   "types": "dist/types/build/index.d.ts",
+  "engines": {
+    "node": "^16.16.0 || ^18.13.0"
+  },
   "exports": {
     ".": {
       "types": "./dist/types/build/index.d.ts",

diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
@@ -2,6 +2,9 @@
   "name": "polaris.shopify.com",
   "version": "0.30.1",
   "private": true,
+  "engines": {
+    "node": "^16.16.0 || ^18.13.0"
+  },
   "scripts": {
     "build": "yarn gen-assets && playroom build && next build && cp -r public ./.next/standalone/polaris.shopify.com/ && mkdirp ./.next/standalone/polaris.shopify.com/.next && cp -r .next/static ./.next/standalone/polaris.shopify.com/.next/",
     "start": "cd ./.next/standalone/polaris.shopify.com && node ./server.js",
@@ -47,7 +50,6 @@
     "@types/lodash.get": "^4.4.7",
     "@types/lodash.throttle": "^4.1.7",
     "@types/marked": "^4.0.3",
-    "@types/node": "17.0.21",
     "@types/prismjs": "^1.26.0",
     "@types/react": "18.0.15",
     "babel-plugin-preval": "^5.1.0",

diff --git a/stylelint-polaris/package.json b/stylelint-polaris/package.json
@@ -13,6 +13,9 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
+  "engines": {
+    "node": "^16.16.0 || ^18.13.0"
+  },
   "files": [
     "index.js",
     "configs/",