Problems with SVGR

[Phil-Barber]

Description Since we started to use @svgr/webpack to load .svg files and import them in our components which are then imported in the component library we've been having the following issue on build:

See our docs page for more info on this error: https://gatsby.dev/debug-html

  101 |       <p>two session labels</p>
  102 |       <SessionCardPlaceholder status={SESSION_STATUSES.draft} mdxType="SessionCardPlaceholder">
> 103 |         <SessionBadge status={SESSION_STATUSES.draft} badgesAreCombined limitToShow={2} content={[{
      |         ^
  104 |               kind: SESSION_BADGE_KIND.label,
  105 |               display: 'DS'
  106 |             }, {

  WebpackError: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full er
  rors and additional helpful warnings.

Adding 'gatsby-plugin-svgr to our gatsby-config plugins means the build runs successfully but the build is not correct. None of the navigation buttons in the left sidebar are clickable, and if I navigate directly to a URL, the components are not rendering correctly.

I've tried adding the following to my gatsby-node:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.svg$/,
          use: {
            loader: '@svgr/webpack',
          },
        },
      ],
    },
    resolve: {
      // ⚠ Note the '..' in the path because the docz gatsby project
      // lives in the `.docz` directory
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
      alias: {
        components: path.resolve('../src/components'),
        api: path.resolve('../src/api'),
        actions: path.resolve('../src/actions'),
        constants: path.resolve('../src/constants'),
        utils: path.resolve('../src/utils'),
        DEPRECATED_stylus: path.resolve('../DEPRECATED_stylus/styles'),
        src: path.resolve('../src'),
        selectors: path.resolve('../src/selectors'),
        'react-assets': path.resolve('../react-assets'),
      },
    },
  });
};

but still no joy.

Additional context

This is taking place inside the main repo with code in src and a root webpack.config.js and babelrc, the docz files build into ./docs. I've seen that can cause problems in other areas.

An example svg being loaded in a component in our ./src. react-assets is being aliased as you can see above:

import { ReactComponent as SearchSvg } from 'react-assets/images/search.svg';

Any help much appreciated

[tjm-lido]

@Phil-Barber try to use https://github.com/doczjs/docz/issues/1184#issuecomment-543737651, helps for me

[Phil-Barber]

I no longer work on this repo so will be unable to confirm if that fixes things. I think we can close this since it's likely stale anyway