Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v13] Miniumum required node version updated to v20.10.0 #11844

Merged
merged 3 commits into from
Apr 9, 2024
Merged

Conversation

jesstelford
Copy link
Contributor

@jesstelford jesstelford commented Apr 5, 2024

Refs https://github.com/Shopify/polaris-internal/issues/1524

Node 16 is EOL, and Node 18 is in Maintenance Mode, so we're updating the minimum required Node version to v20.10.0 (the latest supported by node-releases/browserslist at the time this project started).

When is node used?

Node is used in 2 contexts:

  1. By our consumers when they import, run, and bundle our libraries
  2. By us, the Polaris team, while we develop our libraries

These are very different, and have their own configs within our repository...

1. Consumer's node version

When a consumer uses one of our libraries, they're importing whatever is in the build/* folder. Those assets are generated by our build process (Rollup) which transforms (via babel) whatever version of Javascript we write our code in into a version that's compatible with the targets setting we provide.

For example, Array#findLast was only made available in node v18, so when we write code like:

[1, 2, 3, 2, 1].findLast(x => x < 2);

The output will be different depending on our Babel config:

// with babel config: { targets: 'node 16.0' }
import "core-js/modules/esnext.array.find-last.js";
[1, 2, 3, 2, 1].findLast(x => x < 2);
// with babel config: { targets: 'node 18.0' }
[1, 2, 3, 2, 1].findLast(x => x < 2);

(try it here - set the "Env preset > Node" version to 18.0)

The node 18.0 example above does not include a polyfill for Array#findLast, which means if our consumers try to run Polaris in a node environment (eg; during SSR) that doesn't support Array#findLast, they will get an error.

The way we let our consumers know what is the minimum version of node they can use is via the packages.json#engines.node field. As long as this matches the version specified in Babel#targets, any consumer trying to install our library in an unsupported version of Node will receive an error.

This PR updates the minimum required node version of our consumers to 20.10.0.

2. Our node version while developing Polaris

Similarly, the tools we use to develop Polars (Babel, Postcss, etc) may have a minimum node version requirement.

They do it by specifying a package.json#engines.node version in their own library. Then when we install their package, if our version of node isn't compatible we'll receive an error.

However, the version of node required to run Babel has no impact on its ability to transform our code to work on older versions of node. As long as we tell Babel which version of node to output code for in targets, it doesn't matter what our .nvmrc file says.

#11739 updated the node version for developing with Polaris to 20.11.1.

@jesstelford jesstelford force-pushed the node-20 branch 2 times, most recently from 3e081d9 to eb8da22 Compare April 5, 2024 03:15
@jesstelford jesstelford changed the title Miniumum node version updated to v20.11.1 [v13] Miniumum node version updated to v20.11.1 Apr 5, 2024
@jesstelford jesstelford added the v13.0.0 Tracking all work for @shopify/polaris-react v13.0.0 label Apr 5, 2024
@jesstelford jesstelford changed the title [v13] Miniumum node version updated to v20.11.1 [v13] Miniumum node version updated to v20.10.0 Apr 5, 2024
@jesstelford jesstelford changed the title [v13] Miniumum node version updated to v20.10.0 [v13] Miniumum required node version updated to v20.10.0 Apr 5, 2024
@jesstelford jesstelford force-pushed the node-20 branch 2 times, most recently from b9bf9b6 to cb05e32 Compare April 5, 2024 05:05
restore-keys: |
${{ runner.os }}-node${{ matrix.node-version }}-test-v3-
${{ runner.os }}-node${{ steps.setup_node.outputs.node-version }}-test-v4-
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice update!

@jesstelford jesstelford merged commit a89e614 into main Apr 9, 2024
9 checks passed
@jesstelford jesstelford deleted the node-20 branch April 9, 2024 02:58
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
Refs https://github.com/Shopify/polaris-internal/issues/1524

[Node 16 is EOL](https://nodejs.org/en/about/previous-releases), and
[Node 18 is in Maintenance
Mode](https://nodejs.org/en/about/previous-releases), so we're updating
the minimum required Node version to v20.10.0 (the latest supported by
`node-releases`/`browserslist` at the time this project started).

## When is node used?

Node is used in 2 contexts:

1. By our consumers when they import, run, and bundle our libraries
2. By us, the Polaris team, while we develop our libraries

These are very different, and have their own configs within our
repository...

### 1. Consumer's node version

When a consumer uses one of our libraries, they're importing whatever is
in the `build/*` folder. Those assets are generated by our build process
(Rollup) which transforms (via babel) whatever version of Javascript we
write our code in into a version that's compatible with the [`targets`
setting we
provide](https://github.com/Shopify/polaris/blob/a8ceec19306b62a0c0a5033efc633232da59ff9e/polaris-react/rollup.config.mjs#L72).

For example, `Array#findLast` was only made available in node v18, so
when we write code like:

```javascript
[1, 2, 3, 2, 1].findLast(x => x < 2);
```

The output will be different depending on our Babel config:

```javascript
// with babel config: { targets: 'node 16.0' }
import "core-js/modules/esnext.array.find-last.js";
[1, 2, 3, 2, 1].findLast(x => x < 2);
```

```javascript
// with babel config: { targets: 'node 18.0' }
[1, 2, 3, 2, 1].findLast(x => x < 2);
```

_(try it
[here](https://babeljs.io/repl#?browsers=&build=&builtIns=usage&corejs=3.21&spec=false&loose=false&code_lz=NoRgNABATJDMkwiAugOgGYEsB2ATAMgIYDOALgBQAeEAvAHwTUA80AlANxA&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env&prettier=false&targets=Node-16.0&version=7.24.0&externalPlugins=&assumptions=%7B%7D)
- set the "Env preset > Node" version to `18.0`)_

The `node 18.0` example above does not include a polyfill for
`Array#findLast`, which means if our consumers try to run Polaris in a
node environment (eg; during SSR) that doesn't support `Array#findLast`,
they will get an error.

The way we let our consumers know what is the minimum version of node
they can use is via the `packages.json#engines.node` field. As long as
this matches the version specified in `Babel#targets`, any consumer
trying to install our library in an unsupported version of Node will
receive an error.

This PR updates the minimum required node version of our consumers to
`20.10.0`.

### 2. Our node version while developing Polaris

Similarly, the tools we use to develop Polars (Babel, Postcss, etc) may
have a minimum node version requirement.

They do it by specifying a `package.json#engines.node` version in their
own library. Then when we install their package, if our version of node
isn't compatible we'll receive an error.

However, the version of node required to run Babel _has no impact on its
ability to transform our code to work on older versions of node_. As
long as we tell Babel which version of node to output code for in
`targets`, it doesn't matter what our `.nvmrc` file says.

Shopify#11739 updated the node version
for developing with Polaris to `20.11.1`.

---------

Co-authored-by: Aaron Casanova <aaron.casanova@shopify.com>
@@ -120,6 +120,7 @@
"last 3 safari versions",
"last 3 chromeandroid versions",
"last 1 firefoxandroid versions",
"ios >= 13.4"
"ios >= 13.4",
"node 20.10.0"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this fixed to 20.10.0? Shouldn't it be >= 20.10.0? I am on 20.16.0 and this is causing build errors

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🤖Skip Major Check v13.0.0 Tracking all work for @shopify/polaris-react v13.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants