我正在尝试使用 Typescript 运行 Storybook 3.4.6。目前我正在尝试使用ts-loader
. 每当我尝试运行yarn storybook
时,我都会收到错误消息:
Module build failed: TypeError: Cannot read property 'afterCompile'
of undefined at successfulTypeScriptInstance
关于我的设置的一些信息:
.storybook/config.js
...
function loadStories() {
const req = require.context('../src', true, /^.*\.stories\.tsx$/)
req.keys().forEach(filename => req(filename))
}
...
.storybook/webpack.config.js
const path = require("path");
const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin");
module.exports = (baseConfig, env, config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve("ts-loader")
});
config.plugins.push(new TSDocgenPlugin()); // optional
config.resolve.extensions.push(".ts", ".tsx");
return config;
};
文件夹结构
├── .storybook
└── src
└── components
└── Button
├── Button.tsx
└── Button.stories.tsx
故事书版本和受影响的插件
"@storybook/addon-actions": "^3.4.6",
"@storybook/addon-info": "^3.4.6",
"@storybook/addon-links": "^3.4.6",
"@storybook/react": "^3.4.6",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"ts-loader": "^4.0.0",
"tslint": "^5.9.1",
"typescript": "^2.9.1",
"webpack": "^4.11.1",
"webpack-cli": "^2.1.3"
截屏: