How do I `ignoreOrder` in next.js?

[textpain]

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

[textpain]

@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 (=

[textpain]

@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?

[textpain]

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