我正在尝试使用next.js和Typescript设置React styleguidist,但是我一直遇到问题。我当前的styleguide.config.js如下所示:
const path = require('path');
module.exports = {
components: './components/**/*.tsx',
propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json', {
propFilter: { skipPropsWithoutDoc: true },
}).parse,
webpackConfig: {
resolve: {
alias: {
static: path.join(__dirname, 'static'),
lib: path.join(__dirname, 'lib'),
},
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
},
{
loader: 'babel-loader',
},
],
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images',
},
},
],
},
],
},
},
};
如果我只是一个具有基本jsx的非常基本的组件,那么一切正常,但是一旦我想为例如样式化的组件分配道具,打字稿就会开始抱怨。同样从components
文件夹外部导入内容也会导致问题。
也许有人可以向我指出他们如何进行设置的示例?