[9.3] CSS Modules cannot be imported from within node_modules #10975
Comments
timneutkens
added
the
please add a complete reproduction
|
Please add a complete reproduction so that we can have a look into this. |
|
@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! |
|
A full repository would be a good start, the steps provided are based on an existing app being there which is not provided. |
|
@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! |
|
@timneutkens I reproduced it here https://github.com/Danetag/nextjs-demo Thank you! Note: The issue is triggered with both |
timneutkens
added
Type: Needs Investigation
and removed
please add a complete reproduction
|
Thanks! Will have someone take a look. |
|
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. |
|
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 |
|
This is happening to me too, the cause is the dynamic import. Everything seems to be working properly, but the warning is annoying because you will get one warning for each component inside the folder. |
|
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 Sorry for the wall of text. Thanks for any help. |
|
I'm getting this after upgrade to Next.js 9.5. |
|
I'm also getting this error after upgrading to version 9.5 from 9.4.4. |
|
Hey @claus @SeyedAlirezaFatemi could you provide a reproduction repository? Happy to have a look into the issue you're experiencing. |
|
@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 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 |
|
I think it's a problem with next-transpile-modules. Here is the issue: |
|
@Timer I opened @Danetag repo in Gitpod and ran these commands: yarn && yarn devAfter opening http://localhost:3000 with preview button in Open Ports tab and click on first link I get the error. |
|
Potentially related: |
|
My issue is fixed with today's release of |
|
Closing as this was a bug with |
|
Have the same issue without using |
|
I'm still struggling with this issue, I'm using next 10.0.0 I tried to use Can someone help us ? and explain how @Timer Why did you close this issue ? It's definitively a Next.js issue while I'm not using Is it possible to re-open it ? Thx ! Thanks ! |
|
error - /libs/shared/feature/src/lib/Home/standard-by-cat/Tile.module.css can any one help me with this issue... I am working on Nx monorepo with next.js. |
|
I've opened a RFC to change the CSS imports default with some background: #27953 |
|
Just a small comment from me as the problem seem to be addressed already. I am using nx monorepo + next.js apps with After reading this discussion I started to play with // next.config.js
const withNx = require('@nrwl/next/plugins/with-nx');
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['react-spring']);
const withPWA = require('next-pwa');
const nextConfig = { /* bunch of static props */ };
const plugins = [
// [withTM] // no go - will fail the nx serve and nx build
[withNx],
[withPWA, {...}]
// [withTM] // no go - will fail the nx build, but will work on nx serve
];
module.exports = withTM(withPlugins([...plugins], nextConfig)); // worksPreviously I was using it in A conclusion - perhaps we could put more effort to make working with next.js plugins more deterministic and reliable? I hope this helps someone. Thanks for your hard work! |
|
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
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 StringDescribe 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 thatCSS Modules cannot be imported from within node_modules..To Reproduce
@zeit/next-sassfromnext.config.jsandpackage.jsonnpm install sassSomething.module.scss. No need to import it.Expected behavior
No warning should popup in the terminal.
System information
Additional context
I have updated
next.config.jsto be able to use the importing convention~/instead of../next.config.jspackage.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:
Thank you for your help!
The text was updated successfully, but these errors were encountered: