Module build failed: Error: Final loader with Component-Level CSS

[nicosh]

In next 9.5.5 If i use Component-Level CSS i have following warnings :

react_devtools_backend.js:2273 ./templates/default/default.module.css
CSS Modules cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-modules-npm

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

I know that for many users this was caused by next-transpile-modules module but im not even using that package.
Is possible that this is caused because components are not inside componments folder?
This is my package.json :

  "dependencies": {
    "inquirer": "^7.3.3",
    "next": "9.5.5",
    "next-absolute-url": "^1.2.2",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }

[jamesmosier]

Hi @nicosh. Do you have a more complete example you could provide? Perhaps a repository you could share with a minimal reproduction?

The name of the folder does not matter and should not cause this issue. This is usually from a third party module that is using CSS modules, but as you mentioned you aren't using any third party modules.

[nicosh]

@jamesmosier thanks, but sadly that solution seems to do not work with SSR, do you think that i can just ignore those warnings?

[gyto23]

@jamesmosier I can confirm same behavior for my project and I already have this issues for months. In addition, I dont use any packages that contain the css module nor pages next/dynamic. I am really looking forward to fix it because I am already annoyed by terminal to have it there. For me it happened after I have changed every single file to *.module.scss, the original setup just had *.scss

[nicosh]

The issue seems to be caused by the use of next/dynamic within the body of your function component here. Removing that resolves the issue.

You may want to look into using just regular ES6 dynamic imports as shown here. next/dynamic is meant to live outside of your component body.

@jamesmosier i still have this error even using ES6 dynamic imports

[ListeH]

Any progress here? Same error

[gyto23]

@ListeH most of the cases where it happening for me is because I am using

React.lazy(() => import(`../../myComponent${dynamic}`));

So my case is actually grabbing some of the same .scss files from the directory of the import. Meaning that if I have components and styles in same folder and I do an import of the same folder it start showing the error for me in console. This is not major issue, but I am reconsider this behavior and start moving off the dynamic import in next.js