我试图从 Create React App 3 (CRA)、Typescript、Material UI 和 styled-components 设置 react-styleguidist (RSG)。我被困在这个错误上:
./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js
Module not found: Can't resolve 'rsg-components/Wrapper' in '/Users/ofj/code/new-core-web/node_modules/react-styleguidist/lib/client/rsg-components/ReactExample'
我按照文档设置了 MUI 主题和样式组件的包装器:
https ://react-styleguidist.js.org/docs/thirdparties.html#styled-components
/styleguidist/MuiThemeWrapper.tsx
const muiTheme = getMuiTheme({});
const MuiThemeWrapper = ({ children, ...rest }) => (
<MuiThemeProvider muiTheme={muiTheme}>
<ThemeProvider theme={theme}>
{children}
</ThemeProvider>
</MuiThemeProvider>
);
export default MuiThemeWrapper;
我的 styleguidist 配置:
/styleguidist.config.js
const path = require('path');
module.exports = {
components: "src/components/**/layout.{js,jsx,ts,tsx}",
propsParser: require('react-docgen-typescript').withCustomConfig(
'./tsconfig.json'
).parse,
serverPort: 6161,
styleguideComponents: {
Wrapper: path.join(__dirname, 'styleguidist/MuiThemeWrapper.jsx')
}
};
我的 tsconfig 遵循标准 CRA / MUI 建议
https://material-ui.com/guides/typescript/
tsconfig.json
{
"compilerOptions": {
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"baseUrl": "src",
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"checkJs": false,
"pretty": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"exclude": [
"node_modules"
],
"types": [
"./node_modules/@types/"
]
}
我没有自定义 webpack/babel 配置设置,因为我不知道如何并且不会弄乱 TS 转译。也许这是为了让 RSG 工作而缺少的东西......?还是 rsg-components/ReactExample/ReactExample.js 的错误是一个错误?