Storybook webpack 5 typescript ESM

instructions.md

storybook-webpack5-esm-typescript

The following instructions are collated from storybookjs/storybook#14877

mkdir storybook-esm-react-webpack5
cd storybook-esm-react-webpack5
npm init -y

# manually add "type":"module" to package.json

npm i react react-dom
npm i typescript webpack@5 --save-dev
npx sb init --builder webpack5
mv .storybook/main.js .storybook/main.cjs
mkdir src
mv stories/ to src/

# add `{}` to `.storybook/package.json`
# add tsconfig.json
# update stories glob in .storybook/main.cjs
# update storybook/main.cjs to add workaround: https://github.com/badsyntax/storybook-webpack5-module/blob/master/.storybook/main.cjs#L20

# now for TS fully specified paths support
npm i --save-dev resolve-typescript-plugin
# now manually add the plugin to your webpack config, see: https://github.com/benjambles/my-own-world/blob/57eb64831d302f36a2d66397a6d04738ab5453b4/packages/ui/.storybook/main.cjs#L33

npm run storybook

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "rootDir": "./src",
    "outDir": "./lib",
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "declaration": true,
    "jsx": "react-jsx",
    "sourceMap": true
  },
  "exclude": ["node_modules", "lib"]
}