SCSS modules stopped working after migration to Next.js@9.5.0

[malikalimoekhamedov]

Hello friends,

I just upgraded my project to Next.js to 9.5.0 (along with 'next-transpile-modules' 3.3.0 -> 4.0.0 if that helps anyhow).

---

My SCSS modules, that used to work well, stopped working.

Here's the error:

error - ./src/components/AreYouAMagicMaker/AreYouAMagicMaker.module.scss
CSS Modules cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-modules-npm
Location: src/components/AreYouAMagicMaker/AreYouAMagicMaker.tsx

---

Here's the code:

AreYouAMagicMaker.tsx (excerpt)

import { SectionProps } from 'components';
import dynamic from 'next/dynamic';
import styles from './AreYouAMagicMaker.module.scss';
const Constellation = dynamic(() => import('../Constellation'), { ssr: false });

const AreYouAMagicMaker: React.FC<SectionProps> = ({ id }) => (
  <section id={id} className={styles.areYouAMagicMaker}>
...

AreYouAMagicMaker.module.scss (excerpt)

@import '~zvook-ui-kit/dist/styles/colors';
@import '~zvook-ui-kit/dist/styles/constants';

.areYouAMagicMaker {
  background-image: $gradient-normal-angled;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
...

next.config.js

const withTM = require('next-transpile-modules')(['zvook-ui-kit']); // pass the modules you would like to see transpiled

module.exports = withTM({
  target: 'serverless',
  env: {
    STAGE: process.env.STAGE,
    STRIPE_PUBLISHABLE_KEY: process.env.STRIPE_PUBLISHABLE_KEY,
    HUBSPOT_PORTAL_ID: process.env.HUBSPOT_PORTAL_ID,
    HUBSPOT_FORM_ID: process.env.HUBSPOT_FORM_ID,
  },
});

Any clues?

Thanks in advance.

[malikalimoekhamedov]

Looks like this was fixed in 9.5.1. It's working now.