Axe is included in production build

[muuvmuuv]

The option you provide does not work because you still require the axe script therefore webpack bundles it in production build. Would be great if you optimize this, maybe use a GatsbyAPI hook to provide axe with webpack on development builds instead of pulling it in gatsby-browser.

To test it, bundle an app in production and include gatsby-plugin-webpack-bundle-analyzer.

[angeloashmore]

Good idea, makes sense. We could either change to the Webpack plugin or possibly use a dynamic import.

I'll try to find time to work on this, or feel free to submit a PR if you need the fix sooner.

If you need a fix immediately, this is what I've been using in gatsby-config.js (which is why I guess I never saw this issue):

const IS_DEV = process.env.NODE_ENV === 'development'

module.exports = {
  plugins: [
    IS_DEV && 'gatsby-plugin-react-axe',
  ].filter(Boolean),
}

[muuvmuuv]

Neat trick 😄 ! I must say that I don't have much time ATM, finishing my profile and applying for a new job is my primary goal this month ...

[muuvmuuv]

I found a solution by adding this to webpack:

        new IgnorePlugin({
          resourceRegExp: /^react-axe$/,
        }),

So the final code I added into my website:

gatsby-browser.js:

const React = require('react')
const ReactDOM = require('react-dom')
const reactAxe = require('react-axe')

const activeEnv = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development'
const isDev = activeEnv === 'development'

module.exports.onInitialClientRender = () => {
  if (isDev) {
    // https://github.com/dequelabs/react-axe
    reactAxe(React, ReactDOM, 1000)
  }
}

gatsby-node.js:

const { IgnorePlugin } = require('webpack')

module.exports.onCreateWebpackConfig = ({ stage, actions }) => {
  const { setWebpackConfig } = actions

  if (stage === 'build-javascript') {
    setWebpackConfig({
      plugins: [
        new IgnorePlugin({
          resourceRegExp: /^react-axe$/,
        }),
      ],
    })
  }
}

[GreatState]

I tried

const IS_DEV = process.env.NODE_ENV === 'development'

module.exports = {
  plugins: [
    IS_DEV && 'gatsby-plugin-react-axe',
  ],
}
}

but i kept getting path must be a string and not a boolean(false)

[GreatState]

how does this part work

const { IgnorePlugin } = require('webpack')

when webpack isn't listed as a dependancy? How do we hook into gatsby's webpack version?