Skip to content

Commit

Permalink
Merge pull request #23020 from noviceGuru/next
Browse files Browse the repository at this point in the history
Added `@` import to Webpack config, without needing a package
  • Loading branch information
jonniebigodes authored Jun 26, 2023
2 parents 472d37f + a4d0846 commit 829c084
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 12 deletions.
13 changes: 13 additions & 0 deletions docs/builders/webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,19 @@ Storybook's default Webpack configuration provides support for most project setu

<!-- prettier-ignore-end -->

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:

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/storybook-main-ts-module-resolution-atsign-import.js.mdx',
'common/storybook-main-ts-module-resolution-atsign-import.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

### 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.
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
},
};
```
Original file line number Diff line number Diff line change
@@ -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;
```
14 changes: 8 additions & 6 deletions docs/snippets/common/storybook-main-ts-module-resolution.js.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@ export default {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|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;
},
};
Expand Down
14 changes: 8 additions & 6 deletions docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|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;
},
};
Expand Down

0 comments on commit 829c084

Please sign in to comment.