[LESS] CSS Modules cannot be imported from within node_modules.

[Demidog03]

Link to the code that reproduces this issue

https://github.com/Demidog03/next-less-module-issue

To Reproduce

// TestComponent.tsx

'use client'
import React from 'react';
import styles from './TestStyles.module.less'

const TestComponent = () => {
    return (
        <div className={styles.class}>
            
        </div>
    );
};

export default TestComponent;

Error in local server:

CSS Modules cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-modules-npm
Location: src\TestComponent.tsx

Current vs. Expected behavior

Current behavior:

CSS Modules cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-modules-npm
Location: src\TestComponent.tsx

Import trace for requested module:
./src/TestStyles.module.less
./src/TestComponent.tsx

Expected behavior:
Less module files works fine)

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 31832
  Available CPU cores: 12
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.6.3
Relevant Packages:
  next: 15.2.2 // There is a newer version (15.2.3) available, upgrade recommended!
  eslint-config-next: 15.2.2
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Webpack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[darkwaves-ofc]

Based on the error and environment details you've shared, I'll provide a few potential solutions to fix the Less module import issue in your Next.js project:

1. Install and Configure Less Loader:
   First, install the necessary dependencies:

npm install --save-dev less less-loader

2. Update Next.js Configuration:
   Modify your next.config.js to support Less modules:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: {
              mode: 'local',
              localIdentName: '[local]_[hash:base64:5]'
            }
          }
        },
        'less-loader'
      ]
    });

    return config;
  }
};

module.exports = nextConfig;

3. Ensure Correct Module Configuration:
   Make sure your Less module file (TestStyles.module.less) is correctly structured:

.class {
  background-color: #f0f0f0;
  padding: 10px;
  color: #333;
}

4. Update Import in Component:
   Ensure your component import remains the same:

'use client'
import React from 'react';
import styles from './TestStyles.module.less'

const TestComponent = () => {
    return (
        <div className={styles.class}>
            Test Content
        </div>
    );
};

export default TestComponent;

Additional Troubleshooting Steps:

1. Make sure you have the latest versions of dependencies
2. Clear Next.js cache: npm run build followed by npm run clean
3. Restart your development server

If these solutions don't work, please provide:

• Your full package.json
• Complete next.config.js
• Exact error message
• Folder structure of your project

Would you like me to elaborate on any of these solutions?

[Demidog03]

Based on the error and environment details you've shared, I'll provide a few potential solutions to fix the Less module import issue in your Next.js project:

1. Install and Configure Less Loader:
   First, install the necessary dependencies:

npm install --save-dev less less-loader
2. Update Next.js Configuration:
Modify your next.config.js to support Less modules:

/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config, { isServer }) => {
config.module.rules.push({
test: /.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
mode: 'local',
localIdentName: '[local]_[hash:base64:5]'
}
}
},
'less-loader'
]
});

return config;

}
};

module.exports = nextConfig;
3. Ensure Correct Module Configuration:
Make sure your Less module file (TestStyles.module.less) is correctly structured:

.class {
background-color: #f0f0f0;
padding: 10px;
color: #333;
}
4. Update Import in Component:
Ensure your component import remains the same:

'use client'
import React from 'react';
import styles from './TestStyles.module.less'

const TestComponent = () => {
return (

Test Content

);
};

export default TestComponent;
Additional Troubleshooting Steps:

1. Make sure you have the latest versions of dependencies
2. Clear Next.js cache: npm run build followed by npm run clean
3. Restart your development server

If these solutions don't work, please provide:

• Your full package.json
• Complete next.config.js
• Exact error message
• Folder structure of your project

Would you like me to elaborate on any of these solutions?

Thank you for response! I tried your solution, however it did not solve the issue. I tried other approaches also by specifically writing rules for "*.module.less" files, but it did not help also.

[Demidog03]

I managed to solve the problem by adding "next-plugin-antd-less" in next.config.ts!

import type { NextConfig } from "next";
import withLess from "next-with-less";
import withAntdLess from "next-plugin-antd-less";

const nextConfig: NextConfig = withAntdLess(withLess({
  reactStrictMode: false,
}));

export default nextConfig;

Do not forget to declare module:
declare module 'next-plugin-antd-less';