css-loader issues when using modules

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
dragidavidcommented, Oct 23, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why does css-loader's modules option is false by default? #885
I am trying to use CSS modules in my app. I went to css-loader's documentation to see how to enable it. I saw...
Read more >
Webpack 5 and css-loader aren't compiling @value directive ...
scss files that are importing values from a component library installed in node_modules using the @value directive from CSS Modules. Everything ...
Read more >
style-loader - webpack
By default, style-loader generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial,...
Read more >
Loading Styles - SurviveJS
To load CSS, you need to use css-loader and style-loader. ... The matched files can be processed through asset modules by using the...
Read more >
css-loader - npm
css loader module for webpack. Latest version: 6.7.2, last published: 11 days ago. Start using css-loader in your project by running `npm i ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found