Is it possible to define…

less than 1 minute read

Is it possible to define the Storybook webpack configuration using TypeScript?


I’ve recently converted our custom webpack build to TypeScript (needed it to integrate Tailwind in our Angular app), and since I also reused that Webpack config for Storybook, I just realized that I broke it.

I’ve tried converting the Webpack config under .storybook at the root and in the feature module’s .storybook folder to .ts. The file does seem to go through tsnode, but after fixing most compilation issues I stumble upon this one:

ERR! import * as fs from “fs”; ERR! ^^^^^^ ERR! ERR! SyntaxError: Cannot use import statement outside a module ERR! at Module._compile (internal/modules/cjs/loader.js:891:18) ERR! at Module.m._compile (/home/sebastien/wks/didowi/node_modules/ts-node/src/index.ts:858:23) ERR! at Module._extensions..js (internal/modules/cjs/loader.js:991:10)

I imagine it’s related to the fact that we’re using “module”: “esnext”, in our root tsconfig.json and that node doesn’t like the code it looks at ?