React-styleguidist: static propTypes. Module parse failed: Unexpected token

[GuillaumeMunsch]

Hello

I've been trying to setup react-styleguidist for my react-native project for several hours now and I'm stuck.

I'm defining my propTypes as following:

  static propTypes = {
    property1: PropTypes.arrayOf(PropTypes.shape().isRequired).isRequired,
    property2: PropTypes.func.isRequired,
    ...
  };

And I'm encountering this error:

Module parse failed: Unexpected token (10:19)
You may need an appropriate loader to handle this file type.
|
| class CareerWidgetView extends Component {
>   static propTypes = {
|     property1: PropTypes.arrayOf(PropTypes.shape().isRequired).isRequired,
|     property2: PropTypes.func.isRequired,

Here is my styleguide.config.js:

module.exports = {
  require: ['babel-polyfill'],
  components: 'src/**/[A-Z]*.js',
  ignore: [
    'node_modules/**',
    '**/__tests__/**',
    '**/*.test.{js,jsx,ts,tsx}',
    '**/*.spec.{js,jsx,ts,tsx}',
    '**/*.d.ts',
    '**/index.js',
    '**/*Container.js',
  ],
  webpackConfig: {
    resolve: {
      alias: { 'react-native': 'react-native-web' },
      extensions: ['.js'],
    },
    stats: {
      children: false,
      chunks: false,
      modules: false,
      reasons: false,
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          include: ['src'],
          loader: 'babel-loader?presets[]=react-native',
          options: {
            plugins: ['react-native-web'],
            babelrc: true,
            cacheDirectory: true,
          },
        },
      ],
    },
    plugins: [],
  },
};

And here is my .babelrc (since I'm loading it):

{
  presets: ['react-native'],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          actions: './src/actions',
          analytics: './src/Analytics',
          assets: './src/assets',
          components: './src/components',
          config: './src/config',
          locales: './src/locales',
          logger: './src/Logger/actions/log',
          locales: './src/locales',
          trads: './src/I18n',
          modules: './src/modules',
          sqbStyleSheet: './src/sqbStyleSheet',
          rights: './src/Rights',
          utils: './src/utils',
          theme: './src/theme',
        },
      },
      'transform-class-properties',
    ],
  ],
}

I've tried many things. Playing with the loaders, with the presets (stage-0, stage-1, ...), I tried using the createConfig of webpack-blocks but I can't get it to work.

What I don't get especially is that my project is running fine on my emulator. Which means that the .babelrc config is complete enough to understand the static propTypes functionnality (es6 ? es7 ? I don't remember). But loading it through the styleguide.config.js doesn't work. I'm lost ...

Thanks in advance

[sapegin]

You may be overwriting plugins from the .babelrc here:

options: {
            plugins: ['react-native-web'],
            babelrc: true,
            cacheDirectory: true,
          },

I don't know how this works exactly, you need to check Babel docs.

[mcconkiee]

What was the resolve on this? i have the same issue, but i am not clear on the comment from @sapegin on the fix

[wilsonmsalberto]

Just FYI, added a config that's working for me here: https://github.com/yannickcr/eslint-plugin-react/issues/1203#issuecomment-457530681

[raczben]

Use babel loader
https://webpack.js.org/loaders/babel-loader/