Error - Generating SSR bundle failed with React Native Elements Components

[davemarquess]

Bug Report

When I run yarn docz dev, I'm seeing a series of WEBPACK "Generating SSR bundle failed..." errors. This only happens when .mdx files are created with components that use React Native Elements components.

After running yarn docz dev, many errors are displayed that look similar to these:

ERROR #98123  WEBPACK
Generating SSR bundle failed
Unexpected token (80:6)
File: ../node_modules/react-native-elements/src/buttons/Button.js:80:6

ERROR #98123  WEBPACK
Generating SSR bundle failed
Unexpected token (8:2)
File: ../node_modules/react-native-elements/src/divider/Divider.js:8:2

// doczrc.js

export default {
  src: './src',
  typescript: true,
};

// gatsby-node.js

exports.onCreateWebpackConfig = (args) => {
  args.actions.setWebpackConfig({
    resolve: {
      alias: {
        'react-native': 'react-native-web',
      },
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
    },
  });
};

I have tried

• adding gatsby as dependency and running gatsby clean
• removing node_modules and reinstalling --> rm -rf node_modules --> yarn install
• upgrading node version from v12.16.2 to v13.13.0
• upgrading react native from v0.60.5 to v0.62.2
• deleting .docz directory and regenerating the .docz directory when yarn docz dev is run

To Reproduce

1. Create .mdx file for component that uses React Native Elements
2. Run yarn docz dev

---
name: AvatarComponent
menu: Components
---

import { Playground, Props } from 'docz';
import { AvatarComponent } from './Avatar';

# Avatar

## Properties

<Props of={AvatarComponent} />

## Basic usage

<Playground>
  <AvatarComponent></AvatarComponent>
</Playground>

## Using different sizes

<Playground>
  <AvatarComponent size="small"></AvatarComponent>
</Playground>

Expected behavior
Docz should successfully parse components and run.

Environment

• docz version: 2.3.0
• OS: OSX 10.14.6
• Node: Node 12.16.2
• Yarn: v1.15.2
• React Native Elements: v1.2.7

[davemarquess]

Fixed - there were two issues:

1. onCreateWebpackConfig in gatsby-node.js needed to be configured to exclude all node_modules from transpilation, except for 'react-native-elements', 'react-native-ratings', and 'react-native-vector-icons', as these modules have jsx logic in .js files:

exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => {
  const config = getConfig();
  config.module.rules = [
    ...config.module.rules.filter(
      (rule) => String(rule.test) !== String(/\.jsx?$/),
    ),
    {
      ...loaders.js(),
      test: /\.js?$/,
      exclude: (modulePath) =>
        /node_modules\/(react-native-elements\/src\/config\/fonts.js)/.test(
          modulePath,
        ) ||
        (/node_modules/.test(modulePath) &&
          !/node_modules\/(react-native-elements|react-native-ratings|react-native-vector-icons)/.test(
            modulePath,
          )),
    },
  ];
  actions.replaceWebpackConfig(config);
  actions.setWebpackConfig({
    resolve: {
      alias: {
        'react-native': 'react-native-web',
      },
    },
  });
};

2. Docz uses react-native-web library. The most recent version of this library, 0.12.2 is not compatible with ViewPropTypes type, which React Native Elements uses in many of its components. See this related github thread for another example.
   Solution here is to downgrade react-native-web library to v0.11.7