Next.js Discord

Discord Forum

Cannot import .less modules in NextJS 14.

Unanswered
alumi2 posted this in #help-forum
Open in Discord
I was trying to migrate from v13.1.6 to v14.0.3 and there is issue that lesscss module cannot be loaded, nextjs says that it cannot be imported from node_modules, but this component using only react-twemoji and stylesheet that I using, here the code:
import Twemoji from 'react-twemoji';
import styles from 'styles/components/ui/Card.module.less';

export const Card = ({ title, children, background }) => {
  return (<div className={styles.card__container} data-color={background??"none"}>
    <div className={styles.card__container__info}>
            <Twemoji className={styles.card__container__info__title} options={{ size: "svg", format: ".svg", ext: ".svg" }} >
                {title}
            </Twemoji>
        <div className={styles.card__container__info__content}>
            {children}
        </div>
    </div>
  </div>);
}


And in result as I said I'm getting this stuff:
 ⨯ ./src/styles/components/ui/Card.module.less
CSS Modules cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-modules-npm
Location: src\components\ui\Card.jsx

Import trace for requested module:
./src/styles/components/ui/Card.module.less
./src/components/ui/Card.jsx
./src/app/not-found.jsx


also there is next.config.js:
const withLess = require("next-with-less");

module.exports = withLess({
  swcMinify: true,
  async rewrites() {
    return [
      {
        source: '/api/v1/:path*',
        destination: 'http://localhost:4445/api/v1/:path*',
      },
    ];
  },
  output: 'standalone',
});

1 Reply

I still can’t find any solution to this