Question

我正在尝试向 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 的文档。

React Styleguidist 包装器 - 模块解析失败：意外令牌

0 个答案: