NextJS app doesn't work SCSS modules files from the yarn workspace

radekwarisch commented 3 years ago

Current Behavior

When running the NextJS app (yarn nx serve test in the repo) with React components with SCSS module, imported from Yarn Workspaces package, there is an error displayed:

error - /Users/user/Code/nx-next-yarn-workspace/packages/components/src/styles.module.scss
CSS Modules cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-modules-npm

Expected Behavior

I would expect components with SCSS modules to be consumed by NextJS app, as it is providing support for them out-of-the-box. The temporary fix we made was to use @zeit/next-sass and @zeit/next-css plugins inside the next.config.js file. Then applications started to work, although I believe we shouldn't be forced to using them as they are deprecated.

Steps to Reproduce

Pull the reproduction repository and install node dependencies.
Run yarn nx serve test command (the error should be displayed).
Run yarn nx serve test-working command (this should serve the exact app without any errors).

Failure Logs

Error:

error - /Users/user/Code/nx-next-yarn-workspace/packages/components/src/styles.module.scss
CSS Modules cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-modules-npm

Environment

NX report:

$ nx report

>  NX  Report complete - copy this into the issue template

  Node : 15.5.1
  OS   : darwin x64
  yarn : 1.22.10

  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.3.6
  @nrwl/cypress : 12.3.6
  @nrwl/devkit : 12.3.6
  @nrwl/eslint-plugin-nx : 12.3.6
  @nrwl/express : Not Found
  @nrwl/jest : 12.3.6
  @nrwl/linter : 12.3.6
  @nrwl/nest : Not Found
  @nrwl/next : 12.3.6
  @nrwl/node : Not Found
  @nrwl/react : 12.3.6
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.3.6
  @nrwl/web : 12.3.6
  @nrwl/workspace : 12.3.6
  @nrwl/storybook : 12.3.6
  @nrwl/gatsby : Not Found
  typescript : 4.2.4

✨  Done in 0.40s.

kirjai commented 3 years ago

@radekwarisch thanks for opening the issue!

Looking at your repro, the issue seems to be that you're using the packages directory instead of a default libs directory for your libraries / packages code. If you'd like to keep using packages, then in your nx.json file you need to add the following property:

"workspaceLayout": {
  "libsDir": "packages"
}

See this PR in your repro

So we're on the same page - it's worth pointing out that you don't have to use yarn workspaces if you want to use Nx. While the two tools are not mutually exclusive, there's certainly some overlap in functionality.

Having said that, if you feel like there's some functionality that's missing from Nx that you have to rely on yarn workspaces for, definitely let us know, we'd love to hear that type of feedback!

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx