Merge pull request #24817 from storybookjs/valentin/fix-race-conditio…

…n-for-export-order-loader Webpack5: Fix race condition for export-order loader
storybookjs · Nov 13, 2023 · a2901ba · a2901ba
2 parents 176017d + b90ee0e
commit a2901ba
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
@@ -78,7 +78,7 @@
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "constants-browserify": "^1.0.0",
     "css-loader": "^6.7.1",
-    "es-module-lexer": "^0.9.3",
+    "es-module-lexer": "^1.4.1",
     "express": "^4.17.3",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "fs-extra": "^11.1.0",

diff --git a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts
@@ -6,16 +6,25 @@ export default async function loader(this: LoaderContext<any>, source: string) {
   const callback = this.async();
 
   try {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const [_, exports] = parse(source);
+    // Do NOT remove await here. The types are wrong! It has to be awaited,
+    // otherwise it will return a Promise<Promise<...>> when wasm isn't loaded.
+    const [, exports = []] = await parse(source);
 
-    if (exports.includes('__namedExportsOrder')) {
+    const namedExportsOrder = exports.some(
+      (e) => source.substring(e.s, e.e) === '__namedExportsOrder'
+    );
+
+    if (namedExportsOrder) {
       return callback(null, source);
     }
 
     const magicString = new MagicString(source);
-    const orderedExports = exports.filter((e) => e !== 'default');
-    magicString.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`);
+    const orderedExports = exports.filter((e) => source.substring(e.s, e.e) !== 'default');
+    magicString.append(
+      `;export const __namedExportsOrder = ${JSON.stringify(
+        orderedExports.map((e) => source.substring(e.s, e.e))
+      )};`
+    );
 
     const map = magicString.generateMap({ hires: true });
     return callback(null, magicString.toString(), map);

diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -305,6 +305,7 @@ export default async (
       rules: [
         {
           test: /\.stories\.([tj])sx?$|(stories|story)\.mdx$/,
+          enforce: 'post',
           use: [
             {
               loader: require.resolve('@storybook/builder-webpack5/loaders/export-order-loader'),

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -6169,7 +6169,7 @@ __metadata:
     case-sensitive-paths-webpack-plugin: "npm:^2.4.0"
     constants-browserify: "npm:^1.0.0"
     css-loader: "npm:^6.7.1"
-    es-module-lexer: "npm:^0.9.3"
+    es-module-lexer: "npm:^1.4.1"
     express: "npm:^4.17.3"
     fork-ts-checker-webpack-plugin: "npm:^8.0.0"
     fs-extra: "npm:^11.1.0"
@@ -15247,6 +15247,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-module-lexer@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "es-module-lexer@npm:1.4.1"
+  checksum: b7260a138668554d3f0ddcc728cb4b60c2fa463f15545cf155ecbdd5450a1348952d58298a7f48642e900ee579f21d7f5304b6b3c61b3d9fc2d4b2109b5a9dff
+  languageName: node
+  linkType: hard
+
 "es-set-tostringtag@npm:^2.0.1":
   version: 2.0.1
   resolution: "es-set-tostringtag@npm:2.0.1"