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

[EvHaus]

• 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

[jackyef]

I also have the same error, though without using local packages. Seems like providing any value to the array provided to next-transpile-modules will cause this error to occur.

Here is a repo to show the issue.
In next.config.js, simply changing

const withTM = require('next-transpile-modules')(['something']);

to

const withTM = require('next-transpile-modules')([]);

Will allow the project to build correctly.

[ratheo]

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.

[martpie]

Thank you lads for the report, I'll look into it as soon as possible and will try to add tests to prevent this regression from happening (but it's weird because we have a test for that, so I'll have to check what I did wrong)

[martpie]

I cannot reproduce this error with my test setup here (basic): https://github.com/martpie/next-transpile-modules/tree/master/src/__tests__/__apps__

can you tell me more about the specificity of your setup?

[martpie]

I could not reproduce it, but I could see indeed where the problem was in the webpack config, thanks for your help. I am going to draft a release, it would be great if someone can test it asap.

Also, I still could not reproduce it locally, so I have no idea how to test this scenario, all feedback is welcome.

[ratheo]

With yarn workspaces, the symlinked local packages are hoisted to the root of the project, which means they don't match with the path of the running package directory.

node_modules
     packageA/
     packageB/
package.json
    packages/
        packageA/
        packageB/

Since your test project is not using yarn workspaces, the local package symlinks are placed inside the node_modules folder of your basic package, which means they also match with the running package directory.

[martpie]

Thanks, I will add a test for yarn workspaces

[martpie]

I have a potential fix available here: #96

Would you be able to test it before I release it to tell me if it solves your problem?

[slavb18]

confirm same bug with project https://github.com/slavb18/nextjscssmodules

[martpie]

Should hopefully be fixed in 4.0.1, please share feedback if it works (or not)!

[EvHaus]

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

[jackyef]

4.0.1 fixed it for my as well, thanks!

[JWess]

I know this issue has long been laid to rest, but I just wanted to report that I was on 4.1.0 and had to roll back to 3.3.0 to get rid of this error. I am not using any local packages. I am on NextJS 9.4.4.

[martpie]

Old versions are not supported and I recommend you to update to ntm v6, if you have no local package the upgrade should be quite straightfoward.

[martpie]

Also, see #146