next-transpile-modules: Getting "CSS Modules cannot be imported from within node_modules." with 4.0.0 and next 9.5.0

I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE

Are you trying to transpile a local package or an npm package? A local package

Describe the bug I’m using Yarn workspaces and CSS Modules. After upgrading from next-transpile-modules@3.3.0 and next@9.4.4 to next-transpile-modules@4.0.0 and next@9.5.0 I’m getting the following error when running my application:

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

From reading the source code, I see that CSS Modules are detected through some hacky string parsing. Maybe it’s not working after the upgrade? Rolling back resolves the issue.

To Reproduce

My repo structure is as follows:

package.json
    packages/
        packageA/
        packageB/

Then I import some components in packageA from packageB. Both use CSS Modules.

Expected behavior

No errors. Same behavior as in v3.3.0

Setup

Next.js version: 9.5.0
next-transpile-modules version: 4.0.0
Node.js version: 14.0.0
npm/yarn version: yarn@1.22.4
Operating System: MacOS

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 15 (8 by maintainers)

Most upvoted comments

4.0.1 fixed it for my as well, thanks!

jackyef on Jul 29, 2020

Confirmed. 4.0.1 did the trick. Thanks for the fast turnaround!

EvHaus on Jul 29, 2020

Looks like another issue with the cssloader issuer. The error disappears when changing the issuer to this.

nextCssLoader.issuer = {
  or: nextCssLoader.issuer.and.concat(includes),
  not: excludes,
}

So that the issuer contains the path of the running application in the or field instead of and.

ratheo on Jul 28, 2020