From 6664253b9ef24e7f0d6744c56424705ff2307537 Mon Sep 17 00:00:00 2001 From: fisker Cheung Date: Thu, 24 Mar 2022 11:20:55 +0800 Subject: [PATCH] Fix error when bundle prettier with webpack (#12511) --- changelog_unreleased/misc/12485.md | 7 +++++-- scripts/build/bundler.mjs | 5 ++--- scripts/build/config.mjs | 7 ------- scripts/tools/bundle-test/index.js | 31 ++++++++++++++++++++++++++---- 4 files changed, 34 insertions(+), 16 deletions(-) diff --git a/changelog_unreleased/misc/12485.md b/changelog_unreleased/misc/12485.md index ba690a3bb216..a2372ffb62c8 100644 --- a/changelog_unreleased/misc/12485.md +++ b/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"`. diff --git a/scripts/build/bundler.mjs b/scripts/build/bundler.mjs index 001e274087c7..5a0ade6d9db9 100644 --- a/scripts/build/bundler.mjs +++ b/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"), }, ]; diff --git a/scripts/build/config.mjs b/scripts/build/config.mjs index 77aaf6720716..5241d8255812 100644 --- a/scripts/build/config.mjs +++ b/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( diff --git a/scripts/tools/bundle-test/index.js b/scripts/tools/bundle-test/index.js index 7bac6724d10c..2150dc876da4 100644 --- a/scripts/tools/bundle-test/index.js +++ b/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."); } })();