From ac8fca6f47ae8ad02ee6ab4e7dafdf78275a62f8 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 24 Oct 2022 16:05:46 +1100 Subject: [PATCH 1/2] Ensure preview annotatios are resolved relative to the cwd In v6 mode --- .../src/preview/iframe-webpack.config.ts | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index e2f154e61800..0b24247ea37a 100644 --- a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -125,21 +125,24 @@ export default async ( path.join(__dirname, '..', '..', 'templates', 'virtualModuleEntry.template.js') ); - previewAnnotations.forEach((previewAnnotationFilename: any) => { + previewAnnotations.forEach((previewAnnotationFilename: string) => { + if (!previewAnnotationFilename) return; const clientApi = storybookPaths['@storybook/client-api']; const clientLogger = storybookPaths['@storybook/client-logger']; + // Ensure that relative paths end up mapped to a filename in the cwd, so a later import + // of the `previewAnnotationFilename` in the template works. + const entryFilename = previewAnnotationFilename.startsWith('.') + ? `${previewAnnotationFilename.replace(/(\w)(\/|\\)/g, '$1-')}-generated-config-entry.js` + : previewAnnotationFilename; // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173 - virtualModuleMapping[`${previewAnnotationFilename}-generated-config-entry.js`] = interpolate( - entryTemplate, - { - previewAnnotationFilename, - clientApi, - clientLogger, - } - ); - entries.push(`${previewAnnotationFilename}-generated-config-entry.js`); + virtualModuleMapping[entryFilename] = interpolate(entryTemplate, { + previewAnnotationFilename, + clientApi, + clientLogger, + }); + entries.push(entryFilename); }); if (stories.length > 0) { const storyTemplate = await readTemplate( @@ -157,6 +160,7 @@ export default async ( entries.push(storiesFilename); } } + // console.log(virtualModuleMapping); const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel; const tsCheckOptions = typescriptOptions.checkOptions || {}; From b4314468a733a65e88e9a5302ccc4d3ccaf5a0bf Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 25 Oct 2022 14:39:14 +1100 Subject: [PATCH 2/2] Update code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts --- code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 0b24247ea37a..18229f8e40e7 100644 --- a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -125,7 +125,7 @@ export default async ( path.join(__dirname, '..', '..', 'templates', 'virtualModuleEntry.template.js') ); - previewAnnotations.forEach((previewAnnotationFilename: string) => { + previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => { if (!previewAnnotationFilename) return; const clientApi = storybookPaths['@storybook/client-api']; const clientLogger = storybookPaths['@storybook/client-logger'];