[9.3] CSS Modules cannot be imported from within node_modules

[Danetag]

Bug report

Trying to migrate to next 9.3 and using the built-in sass feature.
When trying to use CSS modules with next 9.3, all my modules trigger the warning

./src/components/Footer/Footer.module.scss
CSS Modules cannot be imported from within node_modules

./src/components/Footer/Footer.module.scss
Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String

Describe the bug

I'm trying to properly migrate to Next 9.3 and use the built-in sass feature. When I have a file named *.module.scss (not even imported), I have warnings in the terminal saying that CSS Modules cannot be imported from within node_modules..

To Reproduce

• Remove @zeit/next-sass from next.config.js and package.json
• Remove .next folder
• Add saas npm install sass
• Create a file Something.module.scss. No need to import it.
• Note the warnings in the terminal

Expected behavior

No warning should popup in the terminal.

System information

• OS: macOS Mojave 10.14.6
• Version of Next.js: 9.3.0
• Version of Node: 13.9.0
• Version of npm: 6.13.7

Additional context

I have updated next.config.js to be able to use the importing convention ~/ instead of ../

next.config.js

const path = require('path');

module.exports = {
  webpack: config => {
    // Alias
    config.resolve.alias['~'] = path.resolve(__dirname + '/src');
    return config;
  }
};

package.json

{
  "name": "...",
  "version": "0.1.0",
  "description": "...",
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "...",
  "license": "MIT",
  "dependencies": {
    "@contentful/rich-text-react-renderer": "^13.4.0",
    "@optimizely/react-sdk": "^1.1.0",
    "bootstrap": "^4.4.1",
    "contentful": "^7.14.0",
    "isomorphic-unfetch": "^3.0.0",
    "next": "^9.3.0",
    "next-compose-plugins": "^2.2.0",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-dom": "^16.12.0",
    "react-optimize": "^2.2.1",
    "sass": "^1.26.2"
  }
}

Also, I'm using ZEIT Now, therefore in dev using:

now dev

Thank you for your help!

[timneutkens]

Please add a complete reproduction so that we can have a look into this.

[Danetag]

@timneutkens What do you mean exactly? You want a component example? This warning is triggered without having to import the file, just by creating it.

Is there anything else I could provide? Thanks!

[timneutkens]

A full repository would be a good start, the steps provided are based on an existing app being there which is not provided.

[Danetag]

@timneutkens Got it! Will see with my client if I can invite you to the repo so you can poke around (it's just a POC so far)

Thank you!

[Danetag]

@timneutkens I reproduced it here https://github.com/Danetag/nextjs-demo

Thank you!

Note: The issue is triggered with both now dev or npm run dev

[timneutkens]

Thanks! Will have someone take a look.

[ShanonJackson]

If you turn on next-transpile-modules https://www.npmjs.com/package/next-transpile-modules this error will go away.

EDIT: In case people come here wondering why people need this; at the moment i would say it serves 2 groups of people

Group 1 are running a monorepo and therefore they want to be able to import they're other packages from node_modules.

Group 2 are bundling an external UI library except instead of producing a single index.css like you're used to they are instead leaving the ".module.scss" imports in the output artifact so when people import that component they automatically only import the critical css not ALL the css always.