如何解决React Styleguidist 包装器 - 模块解析失败:意外令牌
我正在尝试向 Styleguidist 添加包装器以将我的组件包装在 Material UI 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 配置,我想避免这种情况。
我能做什么?
我一直依赖 this section 的文档。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。