Mini-Css-Extract-Plugin Warning in Chunk Chunkname [Mini-Css-Extract-Plugin] Conflicting Order Between:

Ignore order for mini-css-extract-plugin with Gatsby

Have you tried:

const path = require('path')

module.exports.onCreateWebpackConfig = ({
    stage,
    actions,
    getConfig
}) => {
    actions.setWebpackConfig({
        resolve: {
            modules: ['node_modules', path.resolve(__dirname, 'src')],
            alias: {
                'basic-info': path.resolve(__dirname, 'src/app/routes/basic-info'),
                'situation-analysis': path.resolve(__dirname, 'src/app/routes/situation-analysis'),
                'select-drivers': path.resolve(__dirname, 'src/app/routes/select-drivers'),
                'define-vision': path.resolve(__dirname, 'src/app/routes/define-vision'),
                'rate-drivers': path.resolve(__dirname, 'src/app/routes/rate-drivers'),
                'affinity-groups': path.resolve(__dirname, 'src/app/routes/affinity-groups'),
                'define-objectives': path.resolve(__dirname, 'src/app/routes/define-objectives'),
                'create-roadmap': path.resolve(__dirname, 'src/app/routes/create-roadmap')
            }
        },

        devtool: 'eval-source-map'
    })

    if (stage === 'build-javascript' || stage === 'develop') {
        const config = getConfig()

        const miniCssExtractPlugin = config.plugins.find(
            plugin => (plugin.constructor.name === 'MiniCssExtractPlugin')
        )

        if (miniCssExtractPlugin) miniCssExtractPlugin.options.ignoreOrder = true

        actions.replaceWebpackConfig(config)
    }
}

How do I configure mini-css-extract-plugin in Gatsby?

As you can see in Gatsby documentation in your gatsby-node.js Gatsby exposes a few APIs to change webpack's default configuration, one of them, onCreateWebpackConfig, extends and mutates this configuration allowing you to fit your requirements:

Let plugins extend/mutate the site’s webpack configuration.

See also the documentation for setWebpackConfig.

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  if (stage === 'build-javascript') {
    const config = getConfig()
    const miniCssExtractPlugin = config.plugins.find(
      plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
    )
    if (miniCssExtractPlugin) {
      miniCssExtractPlugin.options.ignoreOrder = true
    }
    actions.replaceWebpackConfig(config)
  }
}

There's no much mistery, the code is self-explanatory. Basically you look for mini-css-extract-plugin with plugin.constructor.name === 'MiniCssExtractPlugin' and set your ignoreOrder option as true. Afterward, you replace webpack's default stage action with actions.replaceWebpackConfig(config).

Because stage === 'build-javascript' the snippet only affects in the building stage but you can simply remove it to allow the configuration affects among stages and modes (development and build).

Not able installing mini-css-extract plugin into my project

MiniCssExtractPlugin requires webpack 5 to work.

Starting from version 2.0.0 minimum supported webpack version is 5.0.0

As an option, you can try to use MiniCssExtractPlugin version 1.6.2.
Also consider upgrading to webpack5, but raw-loader plugin is deprecated as well as terser-webpack-plugin

---

Related Topics