Rect Styleguidist: Unexpected token import

Question

I'm having a problem getting the webpack configuration inside the styleguide.config.js

This is my 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
}

But when I run the npx styleguidist server command, I get the following error in the console:

Unexpected token import

The error occurs because it accesses to webpack.config.js and does not interpret "import" at the beginning of the file.

This is the first lines of webpack.config.js

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

Can someone help me with this?

I look in a lot of forums and some say that you have to configure a .babelrc but I haven't got that file in my project.

UPDATE

This is the index.js file

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);

The error occurs when try to inject styles CSS through withStyles

You need to use babel to transpile the `import` statements to `require`. Or if you don't want to use `import` just simply modify your imports to `const path = require('path');` etc.. — peetya, Aug 14 '18 at 13:36
Hi, I included `const path = request('path');` etc.. for each import and now I have this error: `TypeError: Cannot read property 'apply' of undefined at WithStyles.componentWillMount` which cames from the following line: `this.removeCss = this.context.insertCss.apply(undefined, styles);` — dieh1984, Aug 14 '18 at 16:42
it's `require` and not `request`. And this error message means that `insertCss` is undefined. You need to debug it where you initialize it. — peetya, Aug 16 '18 at 19:59

score 0 · Answer 1 · answered Aug 21 '18 at 07:06

0

Styleguidist doesn't support ECMAScript modules (import) in webpack config, so you need to use require instead:

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

P. S. As far as I see webpack doesn't support it by default either.

answered Aug 21 '18 at 07:06

Artem Sapegin

3,096
2
16
20

Rect Styleguidist: Unexpected token import

1 Answers1