0

I have been following this tutorial to try use a custom theme for semantic-ui in NextJS.

However when I start my dev server (npm run dev) i get the following:

TypeError: Cannot set property 'styles' of undefined
    at module.exports (/home/project/node_modules/@zeit/next-css/css-loader-config.js:25:56)

Any ideas why?

My directory structure is as follows:

project
│   next.config.js
|   package.json
|   ...etc
└───pages
└───components
└───src
│   └───semantic-ui
│       └───site
│       │   theme.config
|       |   semantic.less

And my theme.config ends like this:

/*******************************
            Folders
*******************************/

/* Path to theme packages */
@themesFolder : 'themes';

/* Path to site override folder */
@siteFolder  : '../../semantic-ui/site';


/*******************************
         Import Theme
*******************************/

@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : '../../../themes/@{theme}/assets/fonts';


/* End Config */

And finally my next.config.js looks like this:

const path = require('path');
const withLess = require('@zeit/next-less');
const withPlugins = require('next-compose-plugins');

const nextConfig = {
    webpack(config) {
        config.module.rules.push({
            test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    publicPath: '/_next/static/',
                    outputPath: 'static/',
                    name: '[name].[ext]',
                },
            },
        });
        config.resolve.alias['../../theme.config$'] = path.join(config.context, '/semantic-ui/theme.config');
        return config;
    },
};

const plugins = [withLess];
module.exports = withPlugins(plugins, nextConfig);

And in case its important my package.json:

{
  "name": "project",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@zeit/next-less": "^1.0.1",
    "next": "12.0.8",
    "next-compose-plugins": "^2.2.1",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.49.7",
    "semantic-ui-less": "^2.4.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "eslint": "8.7.0",
    "eslint-config-next": "12.0.8",
    "postcss": "^8.4.5"
  }
}
strangeQuirks
  • 4,761
  • 9
  • 40
  • 67
  • It might be related to webpack like this issue: https://stackoverflow.com/questions/68355966/cannot-set-property-styles-of-undefined-in-next-js-during-add-less-support However i cant really downgrade webpack as my next js says it does not support webpack 4 :/ – strangeQuirks Feb 19 '22 at 23:37
  • I'd recommend using [`next-with-less`](https://github.com/elado/next-with-less) or [`next-plugin-antd-less`](https://github.com/SolidZORO/next-plugin-antd-less) instead, as `@zeit/next-less` has been deprecated for a while now. – juliomalves Feb 20 '22 at 15:47

0 Answers0