React-styleguidist: Unexpected token :

[davidsims9t]

I'm getting an error in my readme file where JSON is presumably not recognized/loaded. The error is:

SyntaxError: Unexpected token (3:10)
1 <BasicCard cards={[
2 :   {
3 :     "type": "text",

My style guide config looks like:

module.exports = {
  components: 'src/@(bands|modules|components)/*.js',
  webpackConfig: require('./webpack.config.client.js'),
  getExampleFilename(componentPath) {
    return componentPath.replace('src', 'examples').replace(/\.jsx?$/, '.md');
  }
};

I'm using Webpack 2.2.1.

[sapegin]

Please make an example as described here so I could reproduce the error..

[davidsims9t]

@sapegin Sure I wrote a simple component and failing test.

export default class Test extends React.Component {
render() {
return (
<div></div>
);
}

Test:

<Test test={{"key": "value"}} />

I'm getting the same error as I mentioned above. I'm testing it on Google Chrome 59.0. I'm using React 15.4.2.

Here's what my webpack.config file looks like:

module.exports = {
  target: 'web',
  entry: {
     client: path.join(__dirname, 'client.js')
  },
  output: {
    path: path.join(__dirname, './build/public'),
  },
  externals: {
    'react/addons': true,
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true
  },
  resolveLoader: {
    modules: [
      `${__dirname}/src`,
      `${__dirname}/node_modules`
    ],
    extensions: ['.json', '.js', '.jsx', '.css', '.less']
  },
  resolve: {
    modules: [
      `${__dirname}/src`,
      `${__dirname}/node_modules`
    ],
    extensions: ['.json', '.js', '.jsx', '.css', '.less']
  },
  module: {
    rules: [
      {
        test: /\.js(x)?$/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.json$/,
        use : 'json-loader'
      }
    ]
  }
}

Hopefully this is enough context.

[sapegin]

I can’t reproduce it in an example style guide.

Please make an example as described here so I could reproduce the error..

[davidsims9t]

I was able to eliminate the error by removing my resolver/resolveLoader properties from my Webpack build. This seems to be causing the error. Unfortunately I need custom resolvers. Is there a way to get around this?

[sapegin]

Looks like you have the same issue as #359. Maybe try to use node_modules instead of ${__dirname}/node_modules.

[davidsims9t]

@sapegin That was the same issue I had. It's working perfectly now. Thanks for the help!