Next.js Discord

Discord Forum

SCSS modules are being treated as CSS modules during build process, after migration from 14 to 16.

Unanswered
Saarloos Wolfdog posted this in #help-forum
Open in Discord
Saarloos WolfdogOP
So I am migrating from React 18 to React 19 with compiler.

"next": "14.2.35" -> "16.1.6",
"react": "^18" -> "19.2.4"
"sass":

Because of this, All my scss modules files are being resolved as css modules

.scss

./src/components/radioBtn/radioBtn.module.scss.module.css:49:48
Parsing CSS source code failed
  47 |  * @param {number|string} $val2 - Value for the second position key (default: 0).
  48 |  */
> 49 | @mixin absolute($position1, $position2, $val1: 0, $val2: 0) {
     |                                                ^
  50 |   position: absolute;
  51 |   #{$position1}: $val1;
  52 |   #{$position2}: $val2;


I am attaching my tsconfig and nextconfig in comments,
Can anyone help, What have I tried:
1. sass include in next config,
2. converting all @use "@core-styles" as *; to @use "@styles/index.scss" as *;

Nothing is working, can anyone help please

9 Replies

Saarloos WolfdogOP
next config
import { withSentryConfig } from "@sentry/nextjs";
import createNextIntlPlugin from "next-intl/plugin";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactCompiler: true,
  experimental: {
    optimizePackageImports: ["@mantine/core", "@mantine/hooks"],
    scrollRestoration: true,
  },
  output: "standalone",
};

const withNextIntl = createNextIntlPlugin();

export default withNextIntl(
  withSentryConfig(nextConfig, {
    // For all available options, see:
    // https://www.npmjs.com/package/@sentry/webpack-plugin#options

    org: "indigg",

    project: "kgen-kstore",

    // Only print logs for uploading source maps in CI
    silent: !process.env.CI,

    // For all available options, see:
    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

    // Upload a larger set of source maps for prettier stack traces (increases build time)
    widenClientFileUpload: true,

    // Automatically tree-shake Sentry logger statements to reduce bundle size
    disableLogger: true,

    authToken: process.env.SENTRY_AUTH_TOKEN,
  })
);
tsconfig
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES2017",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "baseUrl": "./",
    "paths": {
      "@clip-paths": ["./src/styles/common/variables/clipPaths.scss"],
      "@core-styles": ["./src/styles/index.scss"],
      "@styles/*": ["./src/styles/*"],
      // ...other path aliass
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "src/i18n/request.ts"
  ],
  "exclude": ["node_modules"]
}
example file
@use "@core-styles" as *;

.radioBtn {
  @include size(20px);
  border: 1px solid $tertiary-color; // slightly thicker + softer color
  border-radius: 50%;
  transition: all 0.25s ease;
  padding: 2px;
  position: relative;

  // Selected state: filled circle with primary color
  &.radioBtnSelected {
    border-color: $primary-color;

    &::after {
      content: "";
      @include absolute(50%, 50%);
      @include size(14px);
      background-color: $primary-color;
      border-radius: 50%;
    }
  }
}
package.json
{
  "name": "kgen-kstore",
  "version": "0.1.0",
  "type": "module",
  "engines": {
    "npm": "Please use yarn instead"
  },
  "private": true,
  "scripts": {
    
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@hookform/resolvers": "^5.0.1",
    "@iconify/react": "^6.0.0",
    "@kgen-protocol/crypto-pg-react-sdk": "^0.0.4",
    "@mantine/carousel": "7.16.2",
    "@mantine/core": "7.16.2",
    "@mantine/hooks": "7.16.2",
    "@mantine/notifications": "7.16.2",
    "@mui/icons-material": "5.18.0",
    "@mui/material": "5.18.0",
    "@reduxjs/toolkit": "^2.2.3",
    "@sentry/nextjs": "^10",
    "@tanstack/react-query": "^5.71.5",
    "@tanstack/react-table": "^8.21.3",
    "@web3modal/wagmi": "^4.1.11",
    "aptos": "^1.21.0",
    "axios": "^1.8.4",
    "clsx": "^2.1.1",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.13",
    "embla-carousel-react": "^7.1.0",
    "firebase": "^10.6.0",
    "google-libphonenumber": "^3.2.34",
    "got": "^14.4.5",
    "immer": "^10.1.1",
    "jotai": "^2.8.0",
    "lottie-react": "^2.4.0",
    "loyalty-protocol": "3.0.19",
    "next": "16.1.6",
    "next-auth": "^4.24.7",
    "next-intl": "^4.5.6",
    "postcss": "^8.5.3",
    "postcss-preset-mantine": "^1.17.0",
    "react": "19.2.4",
    "react-dom": "19.2.4",
    "react-hook-form": "^7.56.0",
    "react-markdown": "^10.1.0",
    "react-qr-code": "^2.0.18",
    "react-redux": "^9.1.2",
    "remark-gfm": "^4.0.1",
    "sass": "1.97.3",
    "sharp": "^0.34.4",
    "tailwindcss": "^4.1.7",
    "uuid4": "^2.0.3",
    "viem": "^2.10.5",
    "wagmi": "^2.8.6",
    "zod": "^3.24.3",
    "zustand": "^5.0.11"
  },
  "devDependencies": {
    "babel-plugin-react-compiler": "1.0.0",
    "eslint": "^8",
    "eslint-config-next": "14.2.26",
    "husky": "^9.1.7",
    "lint-staged": ">=10",
    "pino-pretty": "^13.1.3",
    "prettier": "3.5.3",
    "ts-node": "^10.9.2",
    "typescript": "^5.8.2"
  }
}
postcss.config.js

.js
module.exports = {
  plugins: {
    "postcss-preset-mantine": {},
    "postcss-simple-vars": {
      variables: {
        "mantine-breakpoint-xs": "36em",
        "mantine-breakpoint-sm": "48em",
        "mantine-breakpoint-md": "62em",
        "mantine-breakpoint-lg": "75em",
        "mantine-breakpoint-xl": "88em",
      },
    },
  },
};
Saarloos WolfdogOP
how will you check it?
on meet or something?