css-loader issues when using modules

Hey folks! Not sure if this is a known issue or if I missed something but when trying to use css modules, I get the following error:

../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[5].use[1]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[5].use[3]!../../node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[5].use[4]!../../node_modules/@module-federation/nextjs-mf/src/loaders/patchDefaultSharedLoader.js!./pages/index.module.scss
SassError: expected "{".
  ╷
2 │ require("../../../node_modules/@module-federation/nextjs-mf/src/include-defaults.js");
  │                                                                                      ^
  ╵
  apps/mf/pages/index.module.scss 2:86  root stylesheet

This always happens if I have a file like index.module.scss or anything similar. Without it, everything works fine. Works with normal css as well, or if I remove the NextFederationPlugin from the config.

My next.config.js:

//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withNx } = require('@nrwl/next/plugins/with-nx');
const NextFederationPlugin = require('@module-federation/nextjs-mf');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },

  webpack(config, options) {
    const { isServer } = options;
    const remotes = {
      main: `main@http://localhost:3000/_next/static/${
        isServer ? 'ssr' : 'chunks'
      }/remoteEntry.js`,
    };

    if (!isServer) {
      config.plugins.push(
        // @ts-ignore
        new NextFederationPlugin({
          name: 'mf',
          filename: 'static/chunks/remoteEntry.js',
          remotes: {
            main: remotes.main,
          },
          exposes: {},
          shared: {},
          extraOptions: {
            exposePages: true,
            enableImageLoaderFix: true,
            enableUrlLoaderFix: true,
            skipSharingNextInternals: false,
            automaticPageStitching: true,
          },
        })
      );
    }

    return config;
  },
};

module.exports = withNx(nextConfig);

Versions:

"@module-federation/nextjs-mf": "^5.9.16",
    "@nrwl/next": "15.0.0",
    "core-js": "^3.6.5",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "regenerator-runtime": "0.13.7",
    "tslib": "^2.3.0",
    "webpack": "^5.74.0"

Using a fresh install of NX

[ScriptedAlchemy]

https://github.com/module-federation/nextjs-mf/pull/338

[dragidavid]

So I’m pretty sure you’re not supposed to have any .css in your /pages folder. Once I moved those files over to a different folder, it worked fine. Hope that helps.