elado / next-with-less

Next.js + Less CSS Support

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problem while building nextjs app

EzqTrujillo55 opened this issue · comments

Hi, I'm getting this error when I trying to build a nextjs app

 Build error occurred
[WARNING]: TypeError: Cannot set property regexLikeCss of #<Object> which has only a getter
                                    at patchNextCSSWithLess (/codebuild/output/src235732507/src/myapp/node_modules/next-with-less/dist/index.js:30:30)
                                    at Object.<anonymous> (/codebuild/output/src235732507/src/myapp/node_modules/next-with-less/dist/index.js:33:1)
                                    at Module._compile (internal/modules/cjs/loader.js:1085:14)
                                    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
                                    at Module.load (internal/modules/cjs/loader.js:950:32)
                                    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
                                    at Module.require (internal/modules/cjs/loader.js:974:19)
                                    at require (internal/modules/cjs/helpers.js:101:18)
                                    at Object.<anonymous> (/codebuild/output/src235732507/src/myapp/node_modules/next-with-less/index.js:1:18)
                                    at Module._compile (internal/modules/cjs/loader.js:1085:14)
[WARNING]: error Command failed with exit code 1.

This is my next.config.js

/** @type {import('next').NextConfig} */
require('dotenv').config();
const withLess = require('next-with-less');

module.exports = {
  ...withLess({
    lessLoaderOptions: {
      lessOptions: {
        modifyVars: {
          'primary-color': '#00B2FF',
          'theme-color': '#936dc9',
          'card-theme-color': 'rgba(7, 0, 115, 0.65)',
          'secondary-color': '#f4c83a',
          'sup-color': '#e6bb00',
          'message-color': '#fff6d9',
          'orange-color': '#ffa75c',
          'light-color': '#efe8fe',
          'info-color': '#00B2FF',
          'success-color': '#00c12c',
          'processing-color': '#00a2ae',
          'error-color': '#f04134',
          'highlight-color': '#f04134',
          'warning-color': '#ffbf00',
          'normal-color': '#d9d9d9',
          white: '#fff',
          black: '#000',
          'dark-grey': '#888',
          'grey-color': '#4e4e4e',
          gray: '#e2e8ec',
          'light-grey': '#eee',
          'light-blue': '#f3f7f8',
          'light-card': '#e8f0f2',
          'table-bg': '#f8f9fa',
          'twitter-color': '#1ea2f1',

          'border-select': '#ced4da',
          'border-radius-base': '3px',
          'border-radius-sm': '2px',
          'shadow-color': 'rgba(0, 0, 0, 0.05)',
          'shadow-1-down': '4px 4px 40px rgba(0, 0, 0, 0.05)',
          'border-color-split': '#f4f4f4',
          'border-color-base': '#e5e5e5',
          'font-size-base': '13px',
          'text-color': '#444',
          'hover-color': '#00B2FF',
          'main-background-color': '#fff',
          'sub-background-color': '#fafafa',

          'tablet-screen': '768px',
          'mobile-screen': '500px',
          'smaller-screen': '928px',
          'max-smaller-screen': '375px',

          'group-status-color': '#ffbf00',
          'public-status-color': '#00c12c',
          'private-status-color': '#f04134',
          'offline-status-color': '#e2e8ec'
        }
      }
    }
  })
};

any ideas? i am using:
Node: v14.20.1
NextJS: ^13.1.1
next-with-less: ^2.0.5

UPDATE:
I was able to solve the problem by fixing the nextjs version to 13.1.1, apparently the error occurs with 13.3.1

So in my package.json changed this line:
From ---> "next":^13.1.1 to ---> "next": "13.1.1"