reactjs - Rect Styleguidist:意外的令牌导入
问题描述
我在 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 server 命令时,我在控制台中收到以下错误:
意外的令牌导入
发生错误是因为它访问webpack.config.js并且没有解释文件开头的“import” 。
这是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 时发生错误
解决方案
Styleguidist 不支持import
webpack 配置中的 ECMAScript 模块 ( ),因此您需要require
改用:
const path = require('path');
const webpack = require('webpack');
PS据我所知webpack默认也不支持它。
推荐阅读
- math - 用 4 个点和指定的坡度角对人工地平进行编码
- spring-boot - springboot 应用程序无法以 classnotfoundexception 启动
- twilio - 为什么 Twilio Studio 中的“发送并等待回复”小部件没有“收件人”字段?
- here-api - 通过 Carthage 作为依赖管理器下载 HERE SDK for iOS (PREMIUM EDITION)
- reactjs - React Hooks addEventListener 未定义
- mql4 - 在 mql4 中处理 json 字符串
- swift - 添加幻灯片动画以更改 UIImageView 的图像
- java - Arch Linux Java 执行 jar 的严重错误
- nginx - 将 www 和非 www 重定向到一台服务器
- python - docker pip install 无法使用需求文件