From 2033de8684b12780ee32039173ae0e9f83a43de8 Mon Sep 17 00:00:00 2001 From: Josh Habdas Date: Mon, 29 Mar 2021 13:26:13 +0800 Subject: [PATCH] docs: add workaround for ts baseurl module resolution Provide method to alllow TypeScript modules to resolve when aliased with baseUrl in tsconfig Ref: #13184, #14087 Signed-off-by: Josh Habdas --- docs/configure/webpack.md | 16 +++ ...storybook-main-ts-module-resolution.js.mdx | 15 +++ lib/cli/src/versions.json | 118 +++++++++--------- 3 files changed, 90 insertions(+), 59 deletions(-) create mode 100644 docs/snippets/common/storybook-main-ts-module-resolution.js.mdx diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md index b3800a93e879..6166ff972af5 100644 --- a/docs/configure/webpack.md +++ b/docs/configure/webpack.md @@ -102,3 +102,19 @@ The following code snippet shows how you can replace the loaders from Storybook /> + +### TypeScript Module Resolution + +When working with TypeScript projects the default Webpack configuration may fail to resolve module aliases defined in your [`tsconfig` file](https://www.typescriptlang.org/tsconfig). To work around this issue you may use [`tsconfig-paths-webpack-plugin`](https://github.com/dividab/tsconfig-paths-webpack-plugin#tsconfig-paths-webpack-plugin) while [extending Storybook's Webpack config](#extending-storybooks-webpack-config) like: + + + + + + + +Learn more about Storybook's [built-in TypeScript support](./typescript.md) or see [this issue](https://github.com/storybookjs/storybook/issues/14087) for more information. diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx new file mode 100644 index 000000000000..82454543ac8e --- /dev/null +++ b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx @@ -0,0 +1,15 @@ +```js +// .storybook/main.js + +module.exports = { + webpackFinal: (config) => { + config.resolve.plugins = [ + ...(config.resolve.plugins || []), + new TsconfigPathsPlugin({ + extensions: config.resolve.extensions + }) + ] + return config; + }, +} +``` diff --git a/lib/cli/src/versions.json b/lib/cli/src/versions.json index 09dc6e7fd5bd..48b9fe4d2308 100644 --- a/lib/cli/src/versions.json +++ b/lib/cli/src/versions.json @@ -1,61 +1,61 @@ { - "@storybook/addon-a11y": "6.2.0-rc.9", - "@storybook/addon-actions": "6.2.0-rc.9", - "@storybook/addon-backgrounds": "6.2.0-rc.9", - "@storybook/addon-controls": "6.2.0-rc.9", - "@storybook/addon-cssresources": "6.2.0-rc.9", - "@storybook/addon-design-assets": "6.2.0-rc.9", - "@storybook/addon-docs": "6.2.0-rc.9", - "@storybook/addon-essentials": "6.2.0-rc.9", - "@storybook/addon-events": "6.2.0-rc.9", - "@storybook/addon-google-analytics": "6.2.0-rc.9", - "@storybook/addon-graphql": "6.2.0-rc.9", - "@storybook/addon-jest": "6.2.0-rc.9", - "@storybook/addon-knobs": "6.2.0-rc.9", - "@storybook/addon-links": "6.2.0-rc.9", - "@storybook/addon-queryparams": "6.2.0-rc.9", - "@storybook/addon-storyshots": "6.2.0-rc.9", - "@storybook/addon-storyshots-puppeteer": "6.2.0-rc.9", - "@storybook/addon-storysource": "6.2.0-rc.9", - "@storybook/addon-toolbars": "6.2.0-rc.9", - "@storybook/addon-viewport": "6.2.0-rc.9", - "@storybook/addons": "6.2.0-rc.9", - "@storybook/angular": "6.2.0-rc.9", - "@storybook/api": "6.2.0-rc.9", - "@storybook/aurelia": "6.2.0-rc.9", - "@storybook/builder-webpack4": "6.2.0-rc.9", - "@storybook/builder-webpack5": "6.2.0-rc.9", - "@storybook/channel-postmessage": "6.2.0-rc.9", - "@storybook/channel-websocket": "6.2.0-rc.9", - "@storybook/channels": "6.2.0-rc.9", - "@storybook/cli": "6.2.0-rc.9", - "@storybook/client-api": "6.2.0-rc.9", - "@storybook/client-logger": "6.2.0-rc.9", - "@storybook/codemod": "6.2.0-rc.9", - "@storybook/components": "6.2.0-rc.9", - "@storybook/core": "6.2.0-rc.9", - "@storybook/core-client": "6.2.0-rc.9", - "@storybook/core-common": "6.2.0-rc.9", - "@storybook/core-events": "6.2.0-rc.9", - "@storybook/core-server": "6.2.0-rc.9", - "@storybook/ember": "6.2.0-rc.9", - "@storybook/html": "6.2.0-rc.9", - "@storybook/marionette": "6.2.0-rc.9", - "@storybook/marko": "6.2.0-rc.9", - "@storybook/mithril": "6.2.0-rc.9", - "@storybook/node-logger": "6.2.0-rc.9", - "@storybook/postinstall": "6.2.0-rc.9", - "@storybook/preact": "6.2.0-rc.9", - "@storybook/rax": "6.2.0-rc.9", - "@storybook/react": "6.2.0-rc.9", - "@storybook/riot": "6.2.0-rc.9", - "@storybook/router": "6.2.0-rc.9", - "@storybook/server": "6.2.0-rc.9", - "@storybook/source-loader": "6.2.0-rc.9", - "@storybook/svelte": "6.2.0-rc.9", - "@storybook/theming": "6.2.0-rc.9", - "@storybook/ui": "6.2.0-rc.9", - "@storybook/vue": "6.2.0-rc.9", - "@storybook/vue3": "6.2.0-rc.9", - "@storybook/web-components": "6.2.0-rc.9" + "@storybook/addon-a11y": "6.2.0-rc.10", + "@storybook/addon-actions": "6.2.0-rc.10", + "@storybook/addon-backgrounds": "6.2.0-rc.10", + "@storybook/addon-controls": "6.2.0-rc.10", + "@storybook/addon-cssresources": "6.2.0-rc.10", + "@storybook/addon-design-assets": "6.2.0-rc.10", + "@storybook/addon-docs": "6.2.0-rc.10", + "@storybook/addon-essentials": "6.2.0-rc.10", + "@storybook/addon-events": "6.2.0-rc.10", + "@storybook/addon-google-analytics": "6.2.0-rc.10", + "@storybook/addon-graphql": "6.2.0-rc.10", + "@storybook/addon-jest": "6.2.0-rc.10", + "@storybook/addon-knobs": "6.2.0-rc.10", + "@storybook/addon-links": "6.2.0-rc.10", + "@storybook/addon-queryparams": "6.2.0-rc.10", + "@storybook/addon-storyshots": "6.2.0-rc.10", + "@storybook/addon-storyshots-puppeteer": "6.2.0-rc.10", + "@storybook/addon-storysource": "6.2.0-rc.10", + "@storybook/addon-toolbars": "6.2.0-rc.10", + "@storybook/addon-viewport": "6.2.0-rc.10", + "@storybook/addons": "6.2.0-rc.10", + "@storybook/angular": "6.2.0-rc.10", + "@storybook/api": "6.2.0-rc.10", + "@storybook/aurelia": "6.2.0-rc.10", + "@storybook/builder-webpack4": "6.2.0-rc.10", + "@storybook/builder-webpack5": "6.2.0-rc.10", + "@storybook/channel-postmessage": "6.2.0-rc.10", + "@storybook/channel-websocket": "6.2.0-rc.10", + "@storybook/channels": "6.2.0-rc.10", + "@storybook/cli": "6.2.0-rc.10", + "@storybook/client-api": "6.2.0-rc.10", + "@storybook/client-logger": "6.2.0-rc.10", + "@storybook/codemod": "6.2.0-rc.10", + "@storybook/components": "6.2.0-rc.10", + "@storybook/core": "6.2.0-rc.10", + "@storybook/core-client": "6.2.0-rc.10", + "@storybook/core-common": "6.2.0-rc.10", + "@storybook/core-events": "6.2.0-rc.10", + "@storybook/core-server": "6.2.0-rc.10", + "@storybook/ember": "6.2.0-rc.10", + "@storybook/html": "6.2.0-rc.10", + "@storybook/marionette": "6.2.0-rc.10", + "@storybook/marko": "6.2.0-rc.10", + "@storybook/mithril": "6.2.0-rc.10", + "@storybook/node-logger": "6.2.0-rc.10", + "@storybook/postinstall": "6.2.0-rc.10", + "@storybook/preact": "6.2.0-rc.10", + "@storybook/rax": "6.2.0-rc.10", + "@storybook/react": "6.2.0-rc.10", + "@storybook/riot": "6.2.0-rc.10", + "@storybook/router": "6.2.0-rc.10", + "@storybook/server": "6.2.0-rc.10", + "@storybook/source-loader": "6.2.0-rc.10", + "@storybook/svelte": "6.2.0-rc.10", + "@storybook/theming": "6.2.0-rc.10", + "@storybook/ui": "6.2.0-rc.10", + "@storybook/vue": "6.2.0-rc.10", + "@storybook/vue3": "6.2.0-rc.10", + "@storybook/web-components": "6.2.0-rc.10" }