webpackgatsbycss-modulesmini-css-extract-plugin

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


Issue:

Console is flooded with warnings like: warn chunk commons [mini-css-extract-plugin] Conflicting order. I did some research and found that these warnings can be ignored because I am using css-modules and the order of my imports does not matter. Following steps I found to silence the warnings does not work.

warnings

Desired Solution:

Set ignoreOrder = true option in the plugin config.

What I've Tried:

I followed a similar question here and added the code to my gatsby-node.js:

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') {
        const config = getConfig()

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

        if (miniCssExtractPlugin) miniCssExtractPlugin.options.ignoreOrder = true

        actions.replaceWebpackConfig(config)
    }
}

Solution

  • 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)
        }
    }