Fix prepublish build of Babel 8 with ESM (#14949)

.github/workflows/e2e-tests-breaking-esm.yml

@@ -0,0 +1,88 @@
+name: E2E tests (breaking, esm)
+
+on:
+  push:
+  pull_request:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e-publish:
+    name: Publish to local Verdaccio registry
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Use Node.js latest
+        uses: actions/setup-node@v3
+        with:
+          node-version: "*"
+          cache: "yarn"
+      - name: Use ESM
+        run: make use-esm
+      - name: Publish
+        run: ./scripts/integration-tests/publish-local.sh
+        env:
+          BABEL_8_BREAKING: true
+          USE_ESM: true
+      - uses: actions/upload-artifact@v3
+        with:
+          name: verdaccio-workspace
+          path: /tmp/verdaccio-workspace
+
+  e2e-tests:
+    name: Test
+    needs: e2e-publish
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        project:
+          - create-react-app
+    steps:
+      - name: Get yarn1 cache directory path
+        id: yarn1-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Use Node.js latest
+        uses: actions/setup-node@v3
+        with:
+          node-version: "*"
+      - name: Get yarn3 cache directory path
+        id: yarn3-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+      - name: Use yarn1 cache
+        uses: actions/cache@v3
+        id: yarn1-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn1-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn1-e2e-breaking-${{ matrix.project }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn1-e2e-breaking-${{ matrix.project }}-
+      - name: Use yarn3 cache
+        uses: actions/cache@v3
+        id: yarn3-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn3-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn3-e2e-breaking-${{ matrix.project }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn3-e2e-breaking-${{ matrix.project }}-
+      - name: Clean babel cache
+        run: |
+          rm -rf ${{ steps.yarn1-cache-dir-path.outputs.dir }}/*babel*
+          rm -rf ${{ steps.yarn3-cache-dir-path.outputs.dir }}/*babel*
+      - uses: actions/download-artifact@v3
+        with:
+          name: verdaccio-workspace
+          path: /tmp/verdaccio-workspace
+      - name: Test
+        run: ./scripts/integration-tests/e2e-${{ matrix.project }}.sh
+        env:
+          USE_ESM: true
+          BABEL_8_BREAKING: true

Gulpfile.mjs

@@ -337,21 +337,12 @@ function buildRollup(packages, buildStandalone) {
           ...Object.keys(dependencies),
           ...Object.keys(peerDependencies),
           // @babel/compat-data sub exports
-          "@babel/compat-data/overlapping-plugins",
-          "@babel/compat-data/plugins",
-          "@babel/compat-data/plugin-bugfixes",
-          "@babel/compat-data/native-modules",
-          "@babel/compat-data/corejs2-built-ins",
+          /@babel\/compat-data\/.*/,
           // Ideally they should be constructed from package.json exports
           // required by modules-commonjs
-          "babel-plugin-dynamic-import-node/utils",
+          /babel-plugin-dynamic-import-node\/utils/,
           // required by preset-env
-          "@babel/preset-modules/lib/plugins/transform-async-arrows-in-class",
-          "@babel/preset-modules/lib/plugins/transform-edge-default-parameters",
-          "@babel/preset-modules/lib/plugins/transform-edge-function-name",
-          "@babel/preset-modules/lib/plugins/transform-tagged-template-caching",
-          "@babel/preset-modules/lib/plugins/transform-safari-block-shadowing",
-          "@babel/preset-modules/lib/plugins/transform-safari-for-shadowing",
+          /@babel\/preset-modules\/.*/,
         ];
 
         log(`Compiling '${chalk.cyan(input)}' with rollup ...`);
@@ -479,6 +470,10 @@ function buildRollup(packages, buildStandalone) {
               if (!fs.existsSync(srcPath)) return false;
             }
 
+            if (id.includes("@babel/preset-modules")) {
+              return false;
+            }
+
             return true;
           },
         });

babel.config.js

@@ -63,7 +63,8 @@ module.exports = function (api) {
 
   let targets = {};
   let convertESM = outputType === "script";
-  let addImportExtension = !convertESM;
+  /** @type {false | "externals" | "always"} */
+  let addImportExtension = convertESM ? false : "always";
   let ignoreLib = true;
   let includeRegeneratorRuntime = false;
   let needsPolyfillsForOldNode = false;
@@ -105,7 +106,7 @@ module.exports = function (api) {
       break;
     case "rollup":
       convertESM = false;
-      addImportExtension = false;
+      addImportExtension = "externals";
       ignoreLib = false;
       // rollup-commonjs will converts node_modules to ESM
       unambiguousSources.push(
@@ -223,7 +224,9 @@ module.exports = function (api) {
         assumptions: sourceAssumptions,
         plugins: [
           transformNamedBabelTypesImportToDestructuring,
-          addImportExtension ? pluginAddImportExtension : null,
+          addImportExtension
+            ? [pluginAddImportExtension, { when: addImportExtension }]
+            : null,
 
           [
             pluginToggleBooleanFlag,
@@ -687,14 +690,18 @@ function pluginImportMetaUrl({ types: t, template }) {
   };
 }
 
-function pluginAddImportExtension() {
+function pluginAddImportExtension(api, { when }) {
   return {
     visitor: {
       "ImportDeclaration|ExportDeclaration"({ node }) {
         const { source } = node;
         if (!source) return;
 
-        if (source.value.startsWith(".") && !/\.[a-z]+$/.test(source.value)) {
+        if (
+          when === "always" &&
+          source.value.startsWith(".") &&
+          !/\.[a-z]+$/.test(source.value)
+        ) {
           const dir = pathUtils.dirname(this.filename);
 
           try {