コンポーネントをマテリアル UI でラップするために Styleguidist にラッパーを追加しようとしていますThemeProviderが、Styleguidist によるラッパー ファイルの解析が失敗します。このプロジェクトでは create-react-app を使用しました。
styleguide.config.js:
const path = require('path');
module.exports = {
components: 'src/components/**/[A-Z]*.js',
styleguideComponents: {
Wrapper: path.join(__dirname, 'StyleguidistMuiThemeWrapper.jsx'),
},
}
StyleguidistMuiThemeWrapper.jsx:
import React from 'react';
import { ThemeProvider } from "@material-ui/core/styles";
import theme from "./src/theme"
// eslint-disable-next-line react/prop-types
const StyleguidistMuiThemeWrapper = ({ children }) => (
<ThemeProvider theme={theme}>
{children}
</ThemeProvider>
);
export default StyleguidistMuiThemeWrapper;
theme.jsx:
import { createMuiTheme, responsiveFontSizes } from "@material-ui/core/styles";
const theme = responsiveFontSizes(
createMuiTheme({
palette: {
primary: {
main: "#FFFFFF", // pure white
dark: "#F9F8F7", // off-white
},
},
})
);
export default theme;
Styleguidist をコンパイルしようとすると、次のようになります。
FAIL Failed to compile
./StyleguidistMuiThemeWrapper.jsx 10:2
Module parse failed: Unexpected token (10:2)
File was processed with these loaders:
* ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| // eslint-disable-next-line react/prop-types
| const StyleguidistMuiThemeWrapper = ({ children }) => (
> <ThemeProvider theme={theme}>
| {children}
| </ThemeProvider>
@ ./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js 77:0-45 118:60-67
@ ./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Preview/Preview.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Preview/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/Playground.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Examples/Examples.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Examples/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Section/Section.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Section/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Sections/Sections.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Sections/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/StyleGuide.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/index.js
@ ./node_modules/react-styleguidist/lib/client/utils/renderStyleguide.js
@ ./node_modules/react-styleguidist/lib/client/index.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/react-dev-utils/webpackHotDevClient.js
ラッパー ファイルの拡張子を に変更.jsx(および のパスを更新styleguide.config.js) すると、別のエラーが発生します。
FAIL Failed to compile
./StyleguidistMuiThemeWrapper.js
SyntaxError: /path/to/project/component-library/StyleguidistMuiThemeWrapper.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:3):
5 | // eslint-disable-next-line react/prop-types
6 | const StyleguidistMuiThemeWrapper = ({ children }) => (
> 7 | <ThemeProvider theme={theme}>
| ^
8 | {children}
9 | </ThemeProvider>
10 | );
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
@ ./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js 77:0-45 118:60-67
@ ./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Preview/Preview.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Preview/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/Playground.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Examples/Examples.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Examples/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Section/Section.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Section/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Sections/Sections.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/Sections/index.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/StyleGuide.js
@ ./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/index.js
@ ./node_modules/react-styleguidist/lib/client/utils/renderStyleguide.js
@ ./node_modules/react-styleguidist/lib/client/index.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/react-dev-utils/webpackHotDevClient.js
create-react-app からイジェクトせずに Babel 構成を変更することはできません。これは避けたいことです。
私に何ができる？
私はドキュメントのこのセクションに頼ってきました。