diff --git a/packages/storybook/src/schematics/configuration/lib-files/.storybook/webpack.config.js__tmpl__ b/packages/storybook/src/schematics/configuration/lib-files/.storybook/webpack.config.js__tmpl__ index 780035614c..415331ccc0 100644 --- a/packages/storybook/src/schematics/configuration/lib-files/.storybook/webpack.config.js__tmpl__ +++ b/packages/storybook/src/schematics/configuration/lib-files/.storybook/webpack.config.js__tmpl__ @@ -1,6 +1,10 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const rootWebpackConfig = require('<%= offsetFromRoot %>../.storybook/webpack.config'); -// Export a function. Accept the base config as the only param. +/** + * Export a function. Accept the base config as the only param. + * + * @param {Parameters[0]} options + */ module.exports = async ({ config, mode }) => { config = await rootWebpackConfig({ config, mode }); @@ -13,9 +17,8 @@ module.exports = async ({ config, mode }) => { : (config.resolve.plugins = [tsPaths]) <% if(uiFramework === '@storybook/react') { %> - config.resolve.extensions.push('.tsx'); - config.resolve.extensions.push('.ts'); - + config.resolve.extensions.push('.ts', '.tsx'); + config.module.rules.push({ test: /\.(ts|tsx)$/, loader: require.resolve('babel-loader'), diff --git a/packages/storybook/src/schematics/configuration/root-files/.storybook/webpack.config.js b/packages/storybook/src/schematics/configuration/root-files/.storybook/webpack.config.js index c718e76b0e..69fcea7697 100644 --- a/packages/storybook/src/schematics/configuration/root-files/.storybook/webpack.config.js +++ b/packages/storybook/src/schematics/configuration/root-files/.storybook/webpack.config.js @@ -1,9 +1,10 @@ -// Export a function. Accept the base config as the only param. +/** + * Export a function. Accept the base config as the only param. + * @param {Object} options + * @param {Required} options.config + * @param {'DEVELOPMENT' | 'PRODUCTION'} options.mode - change the build configuration. 'PRODUCTION' is used when building the static version of storybook. + */ module.exports = async ({ config, mode }) => { - // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION' - // You can change the configuration based on that. - // 'PRODUCTION' is used when building the static version of storybook. - // Make whatever fine-grained changes you need // Return the altered config diff --git a/packages/storybook/src/schematics/init/init.spec.ts b/packages/storybook/src/schematics/init/init.spec.ts index 93e41e9f2a..cc61f44b8f 100644 --- a/packages/storybook/src/schematics/init/init.spec.ts +++ b/packages/storybook/src/schematics/init/init.spec.ts @@ -43,6 +43,7 @@ describe('init', () => { expect( packageJson.devDependencies['@storybook/addon-knobs'] ).toBeDefined(); + expect(packageJson.devDependencies['@types/webpack']).toBeDefined(); // angular specific expect(packageJson.devDependencies['@storybook/angular']).toBeDefined(); diff --git a/packages/storybook/src/schematics/init/init.ts b/packages/storybook/src/schematics/init/init.ts index 8ba673b66b..8e552c7cd5 100644 --- a/packages/storybook/src/schematics/init/init.ts +++ b/packages/storybook/src/schematics/init/init.ts @@ -15,6 +15,7 @@ import { storybookVersion, nxVersion, babelPresetTypescriptVersion, + webpackTypesVersion, } from '../../utils/versions'; import { isFramework } from '../../utils/utils'; import { Schema } from './schema'; @@ -28,6 +29,7 @@ function checkDependenciesInstalled(schema: Schema): Rule { // base deps devDependencies['@nrwl/storybook'] = nxVersion; devDependencies['@storybook/addon-knobs'] = storybookVersion; + devDependencies['@types/webpack'] = webpackTypesVersion; if (isFramework('angular', schema)) { devDependencies['@storybook/angular'] = storybookVersion; diff --git a/packages/storybook/src/utils/versions.ts b/packages/storybook/src/utils/versions.ts index d68e11ad91..20dedd9a3c 100644 --- a/packages/storybook/src/utils/versions.ts +++ b/packages/storybook/src/utils/versions.ts @@ -3,3 +3,4 @@ export const storybookVersion = '5.3.9'; export const babelCoreVersion = '7.9.6'; export const babelLoaderVersion = '8.1.0'; export const babelPresetTypescriptVersion = '7.9.0'; +export const webpackTypesVersion = '4.41.21';