How do I ignoreOrder in next.js?

[miloxeon]

The Conflicting order between issue of mini-css-extract-plugin seems to be the common problem of our developer base.

However, there's a possible fix released just about two weeks ago.

How do I integrate it? I'm struggling with finding an exact place in config where I should put ignoreOrder: true.

To Reproduce

1. Try building any kind of complex Next.js application
2. yarn build
3. Warnings are right here in your console

Expected behavior

I don't want this warnings. This issue is the reason I have problems with styles in my Next.js projects: CSS sometimes doesn't apply.

System information

• OS: macOS 10.14.5
• Version of Next.js: 8.1.0

Help is needed urgently and highly appreciated.

[frnk94]

@uyouthe can you show your next.config.js file

[miloxeon]

@frnk94 here it is:

const { PHASE_PRODUCTION_BUILD } = require('next-server/constants');
const withPlugins = require('next-compose-plugins');
const typescript = require('@zeit/next-typescript');
const css = require('@zeit/next-css');
const getLocalIdent = require('css-loader/lib/getLocalIdent');
const config = require('config');

module.exports = withPlugins([typescript, css], {
  env: {
    basePath: config.get('basePath'),
  },
  distDir: '../.next',
  assetPrefix: config.get('development') ? '' : config.get('basePath'),
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
    camelCase: true,
    getLocalIdent: (loaderContext, localIdentName, localName, options) => {
      // HOTFIX: import css classes from react components as-is  
      if (loaderContext.resourceQuery === '?raw-class-name') {
        return localName;
      }

      return getLocalIdent(loaderContext, localIdentName, localName, options);
    },
  },
  [PHASE_PRODUCTION_BUILD]: {
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: '[local]___[hash:base64:5]',
      camelCase: true,
      getLocalIdent: (loaderContext, localIdentName, localName, options) => {
      // HOTFIX: import css classes from react components as-is  
        if (loaderContext.resourceQuery === '?raw-class-name') {
          return localName;
        }

        return getLocalIdent(loaderContext, localIdentName, localName, options);
      },
    },
  },
  webpack(config) {
    const originalEntry = config.entry;

    config.entry = async () => {
      const entries = await originalEntry();

      if (
        entries['main.js'] &&
        !entries['main.js'].includes('./polyfills.js')
      ) {
        entries['main.js'].unshift('./polyfills.js');
      }

      return entries;
    };

    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    });

    config.stats = {
      // HOTFIX: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250
      warningsFilter: (warning) => /Conflicting order between/m.test(warning),
    };

    return config;
  },
});

Now I'm in transition between Styled and CSS Modules, so there are some hotfixes, and there's a hotfix to mute some warnings. But I don't want to mute them. I want to actually get rid of them because of styling issues I mentioned above.

[quantafire]

+1 on this. Anyone have any ideas where to put this flag?

[gwer]

There is no mini-css-extract-plugin in last version of next-css. It's replaced with extract-css-chunks-webpack-plugin (https://github.com/zeit/next-plugins/blob/%40zeit/next-mdx%401.2.1-canary.0/packages/next-css/css-loader-config.js).

I think you don't need this flag after upgrading the package (=

[miloxeon]

@gwer the issue remains: it just says

chunk styles [extract-css-chunks-plugin]
Conflicting order between:

instead of

chunk styles [mini-css-extract-plugin]
Conflicting order between:

[gwer]

Are you sure that suppressing error will fix problem?
Then something like this :: #513 :: should help.

You can try to update extract-css-chunks-plugin to latest version and patch flag ignoreOrder just in node_modules to see if it works.

[charliedieter]

@gwer Thanks for the fix! Ignoring the warnings doesn't necessarily fix the problem, but it has been added because if you are vigilant about scoping and unique naming conventions then it shouldn't be an issue. Definitely not ideal. webpack-contrib/mini-css-extract-plugin#422.

[kvlsrg]

Will be great to pass options to MiniCssExtractPlugin, e.g. ignoreOrder option which already supported.

[jonahfang]

Any progress of this problem?

[miloxeon]

I've given up on next.js because of lack of support

[headwinds]

@gwer when I pull next-css from npm, the version is 1.0.1 but I believe the update you mentioned is part of 1.0.2-canary.2 when I look at the source you shared - thanks for the tip!

npm install @zeit/next-css@1.0.2-canary.2

Actually its next-sass that lists 1.0.1 of next-css as a dependency so if you're also using next-sass I guess we'll need to get

npm install @zeit/next-sass@0.2.1-canary.2 

[headwinds]

ok that didn't work - now instead of complaining about the mini-css-extract plugin, it complains about extract-css-chunks-webpack-plugin

TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.
    at Object.<anonymous> (/Users/project/node_modules/extract-css-chunks-webpack-plugin/dist/index.js:26:11)

[headwinds]

What finally worked for me...

In the package.json I decided to simply set it go with the latest

"@zeit/next-sass": "latest",
"next": "latest",

After finding this fix, I did:

npm install -g npm@latest
rm -rf node_modules
npm install
npm run build
npm run dev 

...and now I'm back in business.

I apologize that my issue isn't exactly what the original poster asked but it may solve your issue if you don't want to mess with webpack.

[webmastervishal]

I've given up on next.js because of lack of support

I am feeling demotivated while working with the next js.

[frnk94]

I've given up on next.js because of lack of support

I am feeling demotivated while working with the next js.

Next@9.2 come with Built-In CSS Support.

However if you can't upgrade and just want to silence those error you can add this config:

// next.config.js
const withCSS = require("@zeit/next-css");
const FilterWarningsPlugin = require("webpack-filter-warnings-plugin");

const nextConfig = {
  webpack: (config) => {
    config.plugins.push(
      new FilterWarningsPlugin({
        exclude: /mini-css-extract-plugin[^]*Conflicting order between:/
      })
    );
    return config;
  }
}

module.exports = withCSS(nextConfig);

[hoangthau]

We can configure like this. It works for me.

// next.config.js
const withCSS = require("@zeit/next-css");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const nextConfig = {
  webpack: (config) => {
    config.plugins.push(
      new MiniCssExtractPlugin({
        ignoreOrder: true // Enable to remove warnings about conflicting order
     })
    );
    return config;
  }
}

module.exports = withCSS(nextConfig);

[noctufaber]

I've given up on next.js because of lack of support

I am feeling demotivated while working with the next js.

Next@9.2 come with Built-In CSS Support.

However if you can't upgrade and just want to silence those error you can add this config:

// next.config.js
const withCSS = require("@zeit/next-css");
const FilterWarningsPlugin = require("webpack-filter-warnings-plugin");

const nextConfig = {
  webpack: (config) => {
    config.plugins.push(
      new FilterWarningsPlugin({
        exclude: /mini-css-extract-plugin[^]*Conflicting order between:/
      })
    );
    return config;
  }
}

module.exports = withCSS(nextConfig);

This worked for me. Even though I'm not having the warnings anymore, should I be concerned that I still have conflicts lurking behind the scenes? I still don't think I adequately understand what is actually causing this warning.

[miloxeon]

I'm closing this because of Next@9.2

[510846]

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

i do that, but not work!

antd: 4.3.4
next: 9.4.4
mini-css-extract-plugin: 0.9.0

[a-m-dev]

still having the issue with next 9.5.5