|
1 | 1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
2 | 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this |
3 | 3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
| 4 | +import type { StorybookConfig } from '@storybook/html-webpack5'; |
| 5 | + |
4 | 6 | const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); |
5 | 7 | const path = require('path'); |
6 | 8 |
|
7 | | -export default { |
| 9 | +const storybookConfig: StorybookConfig = { |
8 | 10 | framework: { |
9 | 11 | name: '@storybook/html-webpack5', |
10 | 12 | options: {}, |
11 | 13 | }, |
12 | 14 | stories: ['../src/**/*.stories.ts'], |
13 | 15 | staticDirs: process.env.STORYBOOK_BUILD === 'true' ? undefined : ['..'], |
14 | | - addons: [ |
15 | | - '@storybook/addon-webpack5-compiler-babel', |
16 | | - '@storybook/addon-docs', |
17 | | - '@storybook/addon-controls', |
18 | | - '@storybook/addon-toolbars', |
19 | | - ], |
20 | | - core: { |
21 | | - builder: 'webpack5', |
22 | | - }, |
23 | | - babel: async (options) => { |
24 | | - const babelConfig = { |
25 | | - ...options, |
26 | | - sourceType: 'unambiguous', |
27 | | - presets: [ |
28 | | - [ |
29 | | - '@babel/preset-env', |
30 | | - { |
31 | | - targets: '> 0.25%, last 2 versions, not dead', |
32 | | - }, |
33 | | - ], |
34 | | - '@babel/preset-typescript', |
35 | | - ], |
36 | | - plugins: [], |
37 | | - }; |
38 | | - console.log('babel config!'); |
39 | | - |
40 | | - return babelConfig; |
41 | | - }, |
42 | | - |
43 | | - features: { storyStoreV7: true }, |
| 16 | + addons: ['@storybook/addon-essentials'], |
44 | 17 | // Added to resolve path aliases set in <projectRoot>/tsconfig.base.json |
45 | 18 | // tsconfig.storybook.json is necessary to replace the *.ts extension in tsconfig.base.json |
46 | 19 | // with a *.js extension. Other than that it should remain the same. |
47 | | - async webpackFinal(config, { configType }) { |
| 20 | + async webpackFinal(config) { |
| 21 | + config.resolve = config.resolve || {}; |
48 | 22 | config.resolve.plugins = [ |
49 | 23 | new TsconfigPathsPlugin({ |
50 | 24 | configFile: path.resolve(__dirname, './tsconfig.storybook.json'), |
51 | 25 | }), |
52 | 26 | ]; |
53 | 27 |
|
54 | | - config.resolve.fallback = { |
55 | | - // fs: false, // Keep this as it's the standard Storybook approach. |
56 | | - // // This is often needed when using internal Node libs in the browser: |
57 | | - // path: false, |
58 | | - // os: false, |
59 | | - // "http": require.resolve("stream-http"), |
60 | | - // "https": require.resolve("https-browserify"), |
61 | | - // // **Potential fix for fs** - by adding 'process' which is another common Node dependency |
62 | | - // process: require.resolve('process/browser'), |
63 | | - }; |
| 28 | + config.resolve.fallback = {}; |
| 29 | + |
| 30 | + // Storybook v8 no longer injects a TS loader for html-webpack5 framework. |
| 31 | + // Wrap all rules in oneOf so this explicit TS rule takes priority. |
| 32 | + config.module = config.module || {}; |
| 33 | + const existingRules = (config.module.rules || []).filter( |
| 34 | + (r): r is object => typeof r === 'object' && r !== null |
| 35 | + ); |
| 36 | + config.module.rules = [ |
| 37 | + { |
| 38 | + oneOf: [ |
| 39 | + { |
| 40 | + test: /\.(ts|tsx)$/, |
| 41 | + loader: require.resolve('babel-loader'), |
| 42 | + options: { |
| 43 | + sourceType: 'unambiguous', |
| 44 | + presets: [ |
| 45 | + [ |
| 46 | + '@babel/preset-env', |
| 47 | + { targets: '> 0.25%, last 2 versions, not dead' }, |
| 48 | + ], |
| 49 | + '@babel/preset-typescript', |
| 50 | + ], |
| 51 | + plugins: [], |
| 52 | + }, |
| 53 | + }, |
| 54 | + ...existingRules, |
| 55 | + ], |
| 56 | + }, |
| 57 | + ]; |
| 58 | + |
64 | 59 | return config; |
65 | 60 | }, |
66 | 61 | }; |
| 62 | + |
| 63 | +export default storybookConfig; |
0 commit comments