Docz to work with Create React App webpack config

[chmurson]

Situation

There is a project I work with, that is set up via Create React App with Typescript support. The choice was to use Docz to setup live documentation for components implemented in it.

Problem

Components that were working nicely in CRA, were not working in Docz. The reason was different way of handling SVG files between those two project. That was the initial reason, there might be more differences.

Solution

To modify Gatsby's webpack config, I went with steps from here https://www.gatsbyjs.org/docs/add-custom-webpack-config. I extracted babel-loader rule config from CRA webpack and injected it in Gatbsy's config, replacing the its babel-loader rule.

Following code is specific Typescirpty. For e.g. pure JS 'tsx' could be replaced with 'jsx' or some more generic code that works with all possible cases.

// gatsby-node.js
exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
    const webpackConfig = getConfig();
    copyBabelLoaderRuleFromCRAtoGatsby(webpackConfig);

    actions.replaceWebpackConfig(webpackConfig)
};

function copyBabelLoaderRuleFromCRAtoGatsby(gatsbyWebpackConfig){
    const createCRAWebpackConfig = require('../node_modules/react-scripts/config/webpack.config.js');
    const webpackConfigOfCRA = createCRAWebpackConfig('');
    const craRuleBabelLoader = webpackConfigOfCRA.module.rules.find(rule => rule.oneOf).oneOf
        .find(rule => String(rule.test).includes('tsx') && rule.loader.includes('babel-loader'));

    gatsbyWebpackConfig.module.rules = [
        ...gatsbyWebpackConfig.module.rules.filter(rule => String(rule.test) !== String(/\.tsx?$/)),
        {
            test: /\.tsx?$/,
            loader: craRuleBabelLoader.loader,
            options: craRuleBabelLoader.options
        }
    ];
}

Feature request / Feature suggestion

I'm new do Docz and to Gatsby, so it took me a heap of time to figure it out, and implement the workaround. I think it would be nice to have solution working out-of-the-box, e.g. Docz takes CRA's webpack config automatically (Storybook and Styleguidist do this). If that is not feasible, it would be nice to have some words in documentation or maybe even example with create-react-app updated.

The reason I'm posting it here, not on Gatsby repo is because it is not obvious why would anyone mix two technologies like Gatsby and CRA. I can imagine the value in it is not clear, in contrast to mixing Docz and CRA.

[rakannimer]

Hey @chmurson,

docz should be able to work with create-react-app out of the box in JS projects and for TS projects by adding typescript: true to your doczrc.js file.

Could you share an example for what you mean by different svg files handling ?

[chmurson]

Hey @rakannimer,

The reason is because CRA supports following way of rendering svgs:

import { ReactComponent as Logo} from './logo.svg';

//somewhere in render function
<div><Logo/></div>

more info: https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

The above method does not work in Docz, because CRA uses some custom babel plugin that makes it possible to import both as react and inline data string. One of the workarounds for this to work in Docz is solution I posted in the first post.

I've managed to replicate the issue on forked Docz repo: https://github.com/chmurson/docz. Please take a look at the modified example: https://github.com/chmurson/docz/tree/master/examples/create-react-app-ts. The Alert components renders in CRA but does not in Docz.

@rakannimer: docz should be able to work with create-react-app out of the box in JS projects and for TS projects by adding typescript: true to your doczrc.js file.

I was not able to find any other issue, so I think apart of that tiny issue, Docz works great with TS and with CRA. :)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[petejodo]

FYI for those who end up here, this can be fixed by installing gatsby-plugin-svgr and adding to the gatsby-config.js like so plugins: ['gatsby-plugin-svgr']. After doing that you should be able to do import { ReactComponent } from 'some.svg';

[yes1am]

FYI for those who end up here, this can be fixed by installing gatsby-plugin-svgr and adding to the gatsby-config.js like so plugins: ['gatsby-plugin-svgr']. After doing that you should be able to do import { ReactComponent } from 'some.svg';

It looks like gatsby-plugin-svgr doesn't process .mdx files by default, so i open a PR

before the PR merged, you can copy the gatsby-plugin-svgr source code, and follow gatsby: developing-a-local-plugin-that-is-outside-your-project