shilman / react-ts

Storybook TS example

This Storybook demonstrates support for TypeScript in Storybook without additional configuration.

Docgen w/ Webpack4

Modifying the .storybook/main.js to use webpack4 and the types for button.tsx will show

Docgen w/ Webpack5

Modifying the .storybook/main.js to use webpack5 and the types for button.tsx will disappear due to hipstersmoothie/react-docgen-typescript-plugin#30

Docgen w/ Webpack5 and Experimental Docgen WP5 support

First build hipstersmoothie/react-docgen-typescript-plugin#33

cd ..
git clone [e-mail]:bebraw/react-docgen-typescript-plugin.git
cd react-docgen-typescript-plugin/
git co feat/update-to-webpack-5
yarn
yarn build

Then link it into this project:

yarn link
cd ../react-ts
yarn link "react-docgen-typescript-plugin"

You can verify that node_modules/react-docgen-typescript-plugin has been overwritten.

Then running yarn storybook results in the following error:

70% sealing finish module graph/Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:156
			moduleGraph.getParentModule(this).buildMeta.strictHarmonyModule
			                                 ^

TypeError: Cannot read property 'buildMeta' of undefined
    at HarmonyImportSpecifierDependency.getWarnings (/Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:156:37)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:2451:24)
    at /Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:2083:10
    at eval (eval at create (/Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:50:1)
    at /Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:332:11
    at /Users/shilman/projects/testing/react-ts/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/shilman/projects/testing/react-ts/node_modules/neo-async/async.js:2850:39)
    at /Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:311:18
    at /Users/shilman/projects/testing/react-ts/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/shilman/projects/testing/react-ts/node_modules/neo-async/async.js:2850:39)
    at /Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:46:16
    at Hook.eval [as callAsync] (eval at create (/Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compilation.finish (/Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:2076:28)
    at /Users/shilman/projects/testing/react-ts/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1051:19
```