Update Babel config to target modern browsers/Node.js

[mrm007]

Fixes #1236

• Update Babel config to target Node.js 14
• Configure Preconstruct to retain await import('vite') syntax
• Upgrade Vite, Vitest and vite-node

Previously, we were using the esmodules target which targets the very first versions of browsers that support ES Modules. That includes a lot of transforms that we don't need to run anymore. Related PR: #520

How Babel targets changed after tweaking the Babel config:

Before

Using targets:
{
  "android": "61",
  "chrome": "61",
  "edge": "16",
  "firefox": "60",
  "ios": "10.3",
  "node": "13.2",
  "opera": "48",
  "safari": "10.1",
  "samsung": "8.2"
}

Using modules transform: auto

Using plugins:
  proposal-class-static-block { android, chrome < 94, edge < 94, firefox < 93, ios, node < 16.11, opera < 80, safari, samsung < 17 }
  proposal-private-property-in-object { android, chrome < 91, edge < 91, firefox < 90, ios < 15, node < 16.9, opera < 77, safari < 15, samsung < 16 }
  proposal-class-properties { android, chrome < 74, edge < 79, firefox < 90, ios < 15, opera < 62, safari < 14.1, samsung < 11 }
  proposal-private-methods { android, chrome < 84, edge < 84, firefox < 90, ios < 15, node < 14.6, opera < 70, safari < 15, samsung < 14 }
  proposal-numeric-separator { android, chrome < 75, edge < 79, firefox < 70, ios < 13, opera < 62, safari < 13, samsung < 11 }
  proposal-logical-assignment-operators { android, chrome < 85, edge < 85, firefox < 79, ios < 14, node < 15, opera < 71, safari < 14, samsung < 14 }
  proposal-nullish-coalescing-operator { android, chrome < 80, edge < 80, firefox < 72, ios < 13.4, node < 14, opera < 67, safari < 13.1, samsung < 13 }
  proposal-optional-chaining { android, chrome < 91, edge < 91, firefox < 74, ios < 13.4, node < 16.9, opera < 77, safari < 13.1, samsung < 16 }
  proposal-json-strings { android, chrome < 66, edge < 79, firefox < 62, ios < 12, opera < 53, safari < 12, samsung < 9 }
  proposal-optional-catch-binding { android, chrome < 66, edge < 79, ios < 11.3, opera < 53, safari < 11.1, samsung < 9 }
  transform-parameters { edge < 18, ios, safari }
  proposal-async-generator-functions { android, chrome < 63, edge < 79, ios < 12, opera < 50, safari < 12 }
  proposal-object-rest-spread { edge < 79, ios < 11.3, safari < 11.1 }
  transform-dotall-regex { android, chrome < 62, edge < 79, firefox < 78, ios < 11.3, opera < 49, safari < 11.1 }
  proposal-unicode-property-regex { android, chrome < 64, edge < 79, firefox < 78, ios < 11.3, opera < 51, safari < 11.1, samsung < 9 }
  transform-named-capturing-groups-regex { android, chrome < 64, edge < 79, firefox < 78, ios < 11.3, opera < 51, safari < 11.1, samsung < 9 }
  transform-async-to-generator { ios < 11, safari < 11 }
  transform-template-literals { ios < 13, safari < 13 }
  transform-function-name { edge < 79 }
  transform-unicode-regex { ios < 12, safari < 12 }
  transform-block-scoping { ios < 11, safari < 11 }
  proposal-export-namespace-from { android < 72, chrome < 72, edge < 79, firefox < 80, ios, opera < 60, safari, samsung < 11.0 }
  transform-modules-commonjs
  proposal-dynamic-import

After

Using targets:
{
  "node": "14.21"
}

Using modules transform: auto

Using plugins:
  proposal-class-static-block { node < 16.11 }
  proposal-private-property-in-object { node < 16.9 }
  syntax-class-properties
  syntax-numeric-separator
  proposal-logical-assignment-operators { node < 15 }
  syntax-nullish-coalescing-operator
  proposal-optional-chaining { node < 16.9 }
  syntax-json-strings
  syntax-optional-catch-binding
  syntax-async-generators
  syntax-object-rest-spread
  transform-modules-commonjs
  proposal-dynamic-import
  proposal-export-namespace-from { }

[changeset-bot]

🦋 Changeset detected

Latest commit: 3a0049e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@vanilla-extract/babel-plugin-debug-ids	Patch
@vanilla-extract/esbuild-plugin-next	Patch
@vanilla-extract/esbuild-plugin	Patch
@vanilla-extract/integration	Patch
@vanilla-extract/jest-transform	Patch
@vanilla-extract/next-plugin	Patch
@vanilla-extract/parcel-transformer	Patch
@vanilla-extract/rollup-plugin	Patch
@vanilla-extract/vite-plugin	Patch
@vanilla-extract/webpack-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mydea]

Hello, this change leads to anything using @remix-run/dev to pull in vite 5, which in turn bumps node version requirement to 18+, which is very breaking!

[mrm007]

@mydea Sorry about that. We don’t rely on any new or deprecated Vite and vite-node APIs, which is why we treated this as a routine dependency bump. And, as you are probably aware, versions of Node.js <18 are end-of-life and no longer maintained. While we don’t have a defined Node.js support policy, following the Node.js release schedule would be a reasonable expectation.

It looks like your integration tests run against Remix v1, so pinning @vanilla-extract/integration is a perfectly viable solution (Remix v2 also requires Node.js 18+).

Interestingly, Remix’s support policy states that they can drop support for EOL versions of Node.js in a minor version:

Remix officially supports Active and Maintenance Node LTS versions at any given point in time. Dropped support for End of Life Node versions is done in a Remix Minor release.