Docz: Using Custom Webpack Config and react-svg-loader

[yakovkhalinsky]

Question

Using Custom Webpack with react-svg-loader
I have setup a doczrc.js and added my module aliases, but now I am running into an error where I am using react-svg-loader to load SVG files setup with my existing webpack.

I have tried to add my loader rule that I have in my webpack.config.js for SVGs but it still causes an error.

doczrc.js extract:

  [
      {
        loader: 'babel-loader',
      },
      {
        loader: 'react-svg-loader',
        options: {
          jsx: true,
        },
      },
    ]

My first attempt was to config.module.rules.push, and then I tried replacing the use part in the existing config.module.rules that was testing for SVGs.

Neither seems to solve the issue. So I am struggling to resolve this. I'm open to suggestions.

[pedronauck]

Try to use onCreateWebpackChain method instead of modifyBundler, can be easy to do that:

export default {
  onCreateWebpackChain: config => {
    config.module
      .rule('js')
      .use('svg-loader')
        .loader('react-svg-loader')
        .options({ jsx: true })
  }
}

[yakovkhalinsky]

Thanks, that seems to now use the react-svg-loaderbut the SVG file going through that loader is now causing an error:

Perhaps it's conflicting with the existing loader.

[yakovkhalinsky]

I will try a few things and see if I can resolve this.

Will post back here when I find the solution.

[yakovkhalinsky]

Just reporting back, seems like I couldn't use react-svg-loader but instead I replaced the file-loader in the webpack config as in this issue https://github.com/pedronauck/docz/issues/169 and that fixed all my errors 👍