Next.js: [9.3] CSS Modules cannot be imported from within node_modules

Created on 11 Mar 2020 · 19Comments · Source: vercel/next.js

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

```.bash
./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`

```.js
const path = require('path');

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

package.json

```.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:

```.bash
now dev

Thank you for your help!

bug p1

Source

Danetag

👍10

Most helpful comment

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.

ShanonJackson on 28 Mar 2020

👍7

All 19 comments

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

timneutkens on 11 Mar 2020

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

Danetag on 11 Mar 2020

😄1

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

timneutkens on 11 Mar 2020

@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 on 11 Mar 2020

@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

Danetag on 12 Mar 2020

Thanks! Will have someone take a look.

timneutkens on 12 Mar 2020

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.

ShanonJackson on 28 Mar 2020

👍7

Note: you must be using at least v3.1.0 of next-transpile-modules for it to support transpiling CSS from node_modules: https://github.com/martpie/next-transpile-modules/releases/tag/3.1.0

jackocnr on 3 Apr 2020

👍1

This is happening to me too, the cause is the dynamic import.
If i have a dynamic import like import("../components/Foo") everything is ok, but if the import is import(`../components/${foo}`) the warning appears.

Everything seems to be working properly, but the warning is annoying because you will get one warning for each component inside the folder.

javi11292 on 25 Apr 2020

I'm getting this issue as well. All my styles seem to be being applied, but all of my components (not pages) with scss modules are throwing this error. When I tried applying next-transpile-modules, the error changes to being unable to parse the "@" character when I import global styles in a line like @import 'src/sass/abstracts/_variables.scss';. Similarly, all styles are applied despite the errors and the errors are only complaining about my components, not pages. When searching specifically about components having errors and not pages, I found a recommendation with no explanation about including a _document.js to the repository. It linked to this page, but I see no mention of _document.js, and when I looked at the _document.js documentation, I see no indication or instruction to do anything regarding scss modules (other than _possibly_ hinted at under "Customizing renderPage"). Am I missing something? If anyone wants to tell me what I'm doing wrong (I welcome it, I just want my project to work), here is the repo on a branch where I am trying to use scss modules and here are some components that fit my description of what is happening (styles are applied but errors are appearing in the terminal).

Sorry for the wall of text. Thanks for any help.

drkgrntt on 18 Jun 2020

I'm getting this after upgrade to Next.js 9.5.
Exact same codebase worked fine with 9.4.x.

claus on 27 Jul 2020

👍2

I'm also getting this error after upgrading to version 9.5 from 9.4.4.

SeyedAlirezaFatemi on 28 Jul 2020

Hey @claus @SeyedAlirezaFatemi could you provide a reproduction repository? Happy to have a look into the issue you're experiencing.

timneutkens on 28 Jul 2020

@timneutkens I tried to reproduce it in isolation but so far no luck 😞

The project where this happens is quite big, so i'm not sure where to even start.

It seems to be related to next-transpile-modules (we use it to transpile gsap). When i remove that from next.config.js (which is otherwise empty), the error goes away and the project compiles, but then obviously can't run gsap. The project uses CSS modules, but i don't import any CSS modules from node_modules. The offending file seems random (maybe the first source file in the pipeline?)

I could ask to get you access to the repo if you like to take a look.

Probably doesn't help, but here are the outputs for npm run dev and npm run build (project name/directory anonymized to protect the innocent):

$ npm run dev

> [email protected] dev /Users/claus/Projects/HAUS/some-website-com
> next dev

ready - started server on http://localhost:3000
info  - Loaded env from /Users/claus/Projects/HAUS/some-website-com/.env.local
info  - Loaded env from /Users/claus/Projects/HAUS/some-website-com/.env
error - ./components/ui/case-studies-detail/CaseStudyHero.module.scss
CSS Modules cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-modules-npm
Location: components/ui/case-studies-detail/CaseStudyHero.js
event - build page: /_error
wait  - compiling...
error - ./components/ui/case-studies-detail/CaseStudyHero.module.scss
CSS Modules cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-modules-npm
Location: components/ui/case-studies-detail/CaseStudyHero.js
Error: Cannot find module '/Users/claus/Projects/HAUS/some-website-com/.next/server/pages-manifest.json'
Require stack:
- /Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/require.js
- /Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/load-components.js
- /Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/api-utils.js
- /Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/next-server.js
- /Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/server/next.js
- /Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/server/lib/start-server.js
- /Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/cli/next-dev.js
- /Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getPagePath (/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/require.js:1:609)
    at requirePage (/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/require.js:2:227)
    at loadComponents (/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/load-components.js:1:628)
    at DevServer.findPageComponents (/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/next-server.js:52:189)
    at DevServer.renderErrorToHTML (/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/next-server.js:94:114)
    at DevServer.renderErrorToHTML (/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/server/next-dev-server.js:30:974) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/require.js',
    '/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/server/next.js',
    '/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/server/lib/start-server.js',
    '/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/cli/next-dev.js',
    '/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/bin/next'
  ]
}

$ npm run build

> [email protected] build /Users/claus/Projects/HAUS/some-website-com
> next build

info  - Loaded env from /Users/claus/Projects/HAUS/some-website-com/.env.local
info  - Loaded env from /Users/claus/Projects/HAUS/some-website-com/.env
Creating an optimized production build

Failed to compile.

./components/ActOnForm/ActOnForm.module.scss
CSS Modules cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-modules-npm
Location: components/ActOnForm/index.js

> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/claus/Projects/HAUS/some-website-com/node_modules/next/dist/build/index.js:15:918)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/claus/.npm/_logs/2020-07-28T13_06_14_385Z-debug.log

claus on 28 Jul 2020

I think it's a problem with next-transpile-modules. Here is the issue:
https://github.com/martpie/next-transpile-modules/issues/95

SeyedAlirezaFatemi on 28 Jul 2020

👍2

@Timer I opened @Danetag repo in Gitpod and ran these commands: