From 5fb3c6dfb2bd6cf462a413ea6efc56e8f7cbce16 Mon Sep 17 00:00:00 2001 From: noviceGuru Date: Sun, 11 Jun 2023 09:19:03 +0200 Subject: [PATCH 1/5] config.resolve can be undefined by type adding the condition, type error prevented --- .../storybook-main-ts-module-resolution.ts.mdx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx index 8ec6bda19a50..6e05d0a6b319 100644 --- a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx +++ b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx @@ -10,12 +10,14 @@ const config: StorybookConfig = { framework: '@storybook/your-framework', stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], webpackFinal: async (config) => { - config.resolve.plugins = [ - ...(config.resolve.plugins || []), - new TsconfigPathsPlugin({ - extensions: config.resolve.extensions, - }), - ]; + if(config.resolve){ + config.resolve.plugins = [ + ...(config.resolve.plugins || []), + new TsconfigPathsPlugin({ + extensions: config.resolve.extensions, + }), + ]; + } return config; }, }; From 305b81c9b778281433285728d28db04441492db1 Mon Sep 17 00:00:00 2001 From: noviceGuru Date: Sun, 11 Jun 2023 09:38:49 +0200 Subject: [PATCH 2/5] An easy way to configure @ import was added, which does not require any package --- docs/builders/webpack.md | 13 +++++++++++ ...-ts-module-resolution-atsign-import.js.mdx | 20 +++++++++++++++++ ...-ts-module-resolution-atsign-import.ts.mdx | 22 +++++++++++++++++++ 3 files changed, 55 insertions(+) create mode 100644 docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx create mode 100644 docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md index e0565bbd8a1f..71cf2b83d67b 100644 --- a/docs/builders/webpack.md +++ b/docs/builders/webpack.md @@ -128,6 +128,19 @@ Storybook's default Webpack configuration provides support for most project setu +While if you only want to add an import path, like `@` import which is used in `NextJS 13` default setup, you can use the following solution without adding a package: + + + + + + + ### Pre-bundled assets do not show in the Storybook UI As Storybook relies on [esbuild](https://esbuild.github.io/) to build its internal manager, support for bundling assets with the `managerWebpack` will no longer have an impact on the Storybook UI. We recommend removing existing `managerWebpack` configuration elements from your Storybook configuration file and bundling assets other than images or CSS into JavaScript beforehand. diff --git a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx new file mode 100644 index 000000000000..7c54b152a917 --- /dev/null +++ b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx @@ -0,0 +1,20 @@ +```js +// .storybook/main.js + +import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; + +export default { + // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + webpackFinal: async (config) => { + if(config.resolve){ + config.resolve.alias = { + ...config.resolve.alias, + '@' : path.resolve(__dirname, '../src') + } + } + return config; + }, +}; +``` diff --git a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx new file mode 100644 index 000000000000..88318e7abc0f --- /dev/null +++ b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx @@ -0,0 +1,22 @@ +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + webpackFinal: async (config) => { + if(config.resolve){ + config.resolve.alias = { + ...config.resolve.alias, + '@' : path.resolve(__dirname, '../src') + } + } + return config; + }, +}; + +export default config; +``` From 0be8314a25146a417849ce6c5b159d6e873a3826 Mon Sep 17 00:00:00 2001 From: noviceGuru Date: Tue, 13 Jun 2023 16:33:40 +0200 Subject: [PATCH 3/5] Description imporved, type correction applied to JS file Description for aliasing configuration imporved, and type correction that was added to TS example, was added to JS version for accuracy and consistency. --- docs/builders/webpack.md | 2 +- .../storybook-main-ts-module-resolution.js.mdx | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md index 71cf2b83d67b..b5d3748b2a58 100644 --- a/docs/builders/webpack.md +++ b/docs/builders/webpack.md @@ -128,7 +128,7 @@ Storybook's default Webpack configuration provides support for most project setu -While if you only want to add an import path, like `@` import which is used in `NextJS 13` default setup, you can use the following solution without adding a package: +However, if you're working with a framework that provides a default aliasing configuration (e.g., Next.js, Nuxt) and you want to configure Storybook to use the same aliases, you may not need to install any additional packages. Instead, you can extend the default configuration of Storybook to use the same aliases provided by the framework. For example, to set up an alias for the `@` import path, you can add the following to your `.storybook/main.js|ts` file: diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx index 9b02a41692a9..3be2fe956327 100644 --- a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx +++ b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx @@ -8,12 +8,14 @@ export default { framework: '@storybook/your-framework', stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], webpackFinal: async (config) => { - config.resolve.plugins = [ - ...(config.resolve.plugins || []), - new TsconfigPathsPlugin({ - extensions: config.resolve.extensions, - }), - ]; + if(config.resolve){ + config.resolve.plugins = [ + ...(config.resolve.plugins || []), + new TsconfigPathsPlugin({ + extensions: config.resolve.extensions, + }), + ]; + } return config; }, }; From 063c3efbfd41f6bef3daaafb9122f9090af4c571 Mon Sep 17 00:00:00 2001 From: noviceGuru Date: Wed, 14 Jun 2023 02:11:59 +0200 Subject: [PATCH 4/5] pretty-docs script was run --- ...storybook-main-ts-module-resolution-atsign-import.js.mdx | 6 +++--- ...storybook-main-ts-module-resolution-atsign-import.ts.mdx | 6 +++--- .../common/storybook-main-ts-module-resolution.js.mdx | 2 +- .../common/storybook-main-ts-module-resolution.ts.mdx | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx index 7c54b152a917..46550ace3cfb 100644 --- a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx +++ b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx @@ -8,11 +8,11 @@ export default { framework: '@storybook/your-framework', stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], webpackFinal: async (config) => { - if(config.resolve){ + if (config.resolve) { config.resolve.alias = { ...config.resolve.alias, - '@' : path.resolve(__dirname, '../src') - } + '@': path.resolve(__dirname, '../src'), + }; } return config; }, diff --git a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx index 88318e7abc0f..2d895baeac19 100644 --- a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx +++ b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx @@ -8,11 +8,11 @@ const config: StorybookConfig = { framework: '@storybook/your-framework', stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], webpackFinal: async (config) => { - if(config.resolve){ + if (config.resolve) { config.resolve.alias = { ...config.resolve.alias, - '@' : path.resolve(__dirname, '../src') - } + '@': path.resolve(__dirname, '../src'), + }; } return config; }, diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx index 3be2fe956327..205d116bffba 100644 --- a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx +++ b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx @@ -8,7 +8,7 @@ export default { framework: '@storybook/your-framework', stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], webpackFinal: async (config) => { - if(config.resolve){ + if (config.resolve) { config.resolve.plugins = [ ...(config.resolve.plugins || []), new TsconfigPathsPlugin({ diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx index 6e05d0a6b319..9e52832566d0 100644 --- a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx +++ b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx @@ -10,7 +10,7 @@ const config: StorybookConfig = { framework: '@storybook/your-framework', stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], webpackFinal: async (config) => { - if(config.resolve){ + if (config.resolve) { config.resolve.plugins = [ ...(config.resolve.plugins || []), new TsconfigPathsPlugin({ From 09db7fe9704943f8510a702e810b7cbcecd18e63 Mon Sep 17 00:00:00 2001 From: noviceGuru Date: Sat, 24 Jun 2023 19:24:06 +0200 Subject: [PATCH 5/5] typo corrected: extra stars in webpack.md deleted --- docs/builders/webpack.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md index b5d3748b2a58..130ac9bd56e1 100644 --- a/docs/builders/webpack.md +++ b/docs/builders/webpack.md @@ -136,7 +136,7 @@ However, if you're working with a framework that provides a default aliasing con paths={[ 'common/storybook-main-ts-module-resolution-atsign-import.js.mdx', 'common/storybook-main-ts-module-resolution-atsign-import.ts.mdx', - ]}**** + ]} />