Fix error when bundle prettier with webpack (#12511)

changelog_unreleased/misc/12485.md

@@ -1,3 +1,6 @@
-#### Make artifact friendly for `webpack` (#12485 by @fisker)
+#### Make artifact friendly for webpack (#12485, #12511 by @fisker)
 
-Previously, when bundling our UMD files `standalone.js`, `parser-typescript.js`, `webpack` warn about "Critical dependency: the request of a dependency is an expression", now this is fixed.
+Fixes two problems when bundling our UMD files with webpack:
+
+- A error `` "`....__exportStar` is not a function" `` throws when running the bundles.
+- Some files cause warning about `"Critical dependency: the request of a dependency is an expression"`.

scripts/build/bundler.mjs

@@ -76,11 +76,10 @@ const bundledFiles = [
 
 function* getEsbuildOptions(bundle, buildOptions) {
   const replaceModule = [
-    // `tslib` exports global variables
+    // #12493, not sure what the problem is, but replace the cjs version with esm version seems fix it
     {
       module: require.resolve("tslib"),
-      find: "factory(createExporter(root",
-      replacement: "factory(createExporter({}",
+      path: require.resolve("tslib").replace(/tslib\.js$/, "tslib.es6.js"),
     },
   ];
 

scripts/build/config.mjs

@@ -235,13 +235,6 @@ const parsers = [
   },
   {
     input: "src/language-yaml/parser-yaml.js",
-    replaceModule: [
-      // Use `tslib.es6.js`, so we can avoid `globalThis` shim
-      {
-        module: require.resolve("tslib"),
-        path: require.resolve("tslib").replace(/tslib\.js$/, "tslib.es6.js"),
-      },
-    ],
   },
 ].map((bundle) => {
   const { name } = bundle.input.match(

scripts/tools/bundle-test/index.js

@@ -1,6 +1,7 @@
 import { fileURLToPath } from "node:url";
 import path from "node:path";
 import fs from "node:fs/promises";
+import { createRequire } from "node:module";
 import webpack from "webpack";
 import { DIST_DIR } from "../../../scripts/utils/index.mjs";
 
@@ -39,7 +40,11 @@ const TEMPORARY_DIRECTORY = fileURLToPath(new URL("./.tmp", import.meta.url));
           name === "standalone.js" ||
           name === "doc.js"
       )
-      .map((name) => ({ name, file: path.join(DIST_DIR, name) })),
+      .map((name) => ({
+        displayName: name,
+        name,
+        file: path.join(DIST_DIR, name),
+      })),
     (await fs.readdir(esmFilesDirectory)).map((name) => ({
       displayName: `esm/${name}`,
       name,
@@ -48,26 +53,44 @@ const TEMPORARY_DIRECTORY = fileURLToPath(new URL("./.tmp", import.meta.url));
   ].flat();
 
   for (const { displayName, name, file } of files) {
-    console.log(`${displayName || name}: `);
+    console.log(`${displayName}: `);
+    const isEsmModule = name.endsWith(".mjs");
 
     const stats = await runWebpack({
       mode: "production",
       entry: file,
       output: {
         path: TEMPORARY_DIRECTORY,
-        filename: `${name}.[contenthash:7].js`,
+        filename: `${name}.[contenthash:7].${isEsmModule ? "mjs" : "cjs"}`,
       },
       performance: { hints: false },
       optimization: { minimize: false },
     });
     const result = stats.toJson();
-    const { warnings } = result;
+    const { warnings, assets } = result;
 
     if (warnings.length > 0) {
       console.log(warnings);
       throw new Error("Unexpected webpack warning.");
     }
 
+    if (assets.length > 1) {
+      console.log(assets);
+      throw new Error("Unexpected assets.");
+    }
+
+    if (!isEsmModule) {
+      const outputFile = assets[0].name;
+      const require = createRequire(import.meta.url);
+
+      try {
+        require(path.join(TEMPORARY_DIRECTORY, assets[0].name));
+      } catch (error) {
+        console.log(`'${outputFile}' is not functional.`);
+        throw error;
+      }
+    }
+
     console.log("  Passed.");
   }
 })();