Rect Styleguidist:意外令牌导入

Question

我在styleguide.config.js内部获得webpack配置时遇到了问题

这是我的styleguide.config.js：

module.exports = {
  title: 'My Guide Project',
  components: 'src/components/**/[A-Z]*.js',
  showSidebar: true,
  pagePerSection: true,
  sections: [
    {
      name: 'Components',
      components: () => [
        './src/components/Card/index.js',
      ],
      exampleMode: 'hide', // 'hide' | 'collapse' | 'expand'
      usageMode: 'expand'
    },
  ],
  webpackConfig: require('./tools/webpack.config.js'), <-- Webpack config
}

但是，当我运行npx styleguidist服务器命令时，控制台中会出现以下错误：

意外令牌导入

发生此错误是因为它访问webpack.config.js，并且在文件开始时不解释“导入”。

这是webpack.config.js的第一行

import path from 'path';
import webpack from 'webpack';
import AssetsPlugin from 'assets-webpack-plugin';
import nodeExternals from 'webpack-node-externals';
...
...

有人能帮我吗？

我在很多论坛上查看过，有些人说您必须配置一个.babelrc，但是我的项目中没有那个文件。

更新

这是index.js文件。

import React, { Component } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import PropTypes from 'prop-types';
import s from './Card.css';

class Card extends Component {

  render() {
    const {
      title,
      titleIconClass,
      showCardAction,
      loading,
      cardHeaderLink,
      iconCustomStyles,
    } = this.props;

    return (
      <div className={s.smgCard}>
        <div
          className={`${s.smgCardHeader} ${
            cardHeaderLink ? s.cursorPointer : null
          }`}
          onClick={() => console.log("TEST!")}
          role="presentation"
        >
          <div className={s.smgCardTitle}>
            <span className={s.smgCardTitleText}>{title}</span>
            <i className={`${s.smgCardIcon} ${titleIconClass}`} style={ iconCustomStyles }/>
          </div>
        </div>
      </div>
    );
  }
}

export default withStyles(s)(Card);

当尝试通过withStyles注入样式CSS时，会发生此错误。

Answer 1

Styleguidist不支持webpack配置中的ECMAScript模块(import)，因此需要使用require：

const path = require('path');
const webpack = require('webpack');

据我所见，webpack不支持在默认情况下也是如此。