CSS modules transpilation fails when @zeit/next-sass is activated

[cedric-marcone]

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

Are you trying to transpile a local package or an npm package?
I'm trying to transpile a local package

Describe the bug
Since v3 used with nextjs 9.2 we can transpile css modules and it works great !

But, just by adding @zeit/next-sass to next-config.js it breaks :

/Users/cedric/Develop/Code/github/valraiso-esf/repro-tm-sass/node_modules/lib/es/components/button.module.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .button {
|   display: inline-flex;
|   flex-wrap: nowrap;

> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/cedric/Develop/Code/github/valraiso-esf/repro-tm-sass/node_modules/next/dist/build/index.js:10:900)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To Reproduce
I made a mono-repo available to test the behavior :

git clone https://github.com/cedric-marcone/repro-tm-sass
cd repro-tm-sass
yarn
cd packages/lib
yarn build
cd ../site
yarn build

=> It works

Then edit next.config.js :

Replace

// module.exports = withSass(withTM()); // BREAKS
module.exports = withTM(); // WORKS

By

module.exports = withSass(withTM()); // BREAKS
// module.exports = withTM(); // WORKS

And rebuild :

yarn build

=> It breaks

Note that is fails even there is no scss files, I just added the next-sass plugin

Expected behavior
It should transpile *.module.css even if the next-sass plugin is activated.

Setup

• Next.js version: 9.2.2
• next-transpile-modules version: 3.0.2
• Node.js version: 12.16.1
• yarn version: 1.22.0
• Operating System: macos catalina

[martpie]

What happens if you withTM(withSass());?

btw, native Sass support will ship soon in Next.js ;)

[martpie]

Just to understand your setup: you have Sass files in your Next.js app and you have module.css in your shared package, right?

[cedric-marcone]

Hey !
Thanks for your reply.
=> I tried with withTM(withSass()) and it fails with the same error :)

Your are right about our setup. It's a monorepo with :

• libs containing components
• some widgets (CRA based) consuming those libs
• a site (next.js based) consuming those libs.

Components in the libs are currently using styled-jsx and I want to move them to css modules to reduce bundles sizes.

...but the site has all its stylesheets written with scss.

=> That's why I'm doing these tests :)

[martpie]

The problem comes most probably from the fact both plugins may be editing the same Webpack rules.

I will try to analyze the current @zeit/next-sass module, but if tomorrow the native support for Sass is out, I will prioritize the support of the latter. Hope it's fine for you.

[cedric-marcone]

Merci Pierre !
Understood and fine with me :)
I saw vercel/next.js#10133 and I'll do my homework.
=> I'll try again with next v9.2.3-canary.17 and

{
  experimental: { scss: true }
}

I'll keep you posted

[martpie]

awesome!

[cedric-marcone]

Just did it in the repro repo : https://github.com/cedric-marcone/repro-tm-sass
=> It works perfectly !!
Thanks for your insight
A+

[martpie]

Can I close this then? :)

edit: your company may not like to work on canary though

[cedric-marcone]

I won't deploy anything relying on canary to production but, as we work on next gen e-commerce platform for ESF (écoles du ski français) , we won't need to until the end of the summer 😄so, it's pretty cool !
I close, thanks for your help :)

[martpie]

Cocorico!