craco-less TypeError: Cannot read property 'push' of undefined

[nerdess]

This package has craco-less as dependency. However, depending on the node version I use I get different errors when starting my project using yarn start:

node v17.3.1

node v14.17.0

This is my rather simple craco.config.js

const CracoAntDesignPlugin = require('craco-antd');
const path = require('path');

module.exports = {
    webpack: {
    alias: {
        "@components": path.resolve(__dirname, "src/components/"),
        "@util": path.resolve(__dirname, "src/util/"),
        "@pages": path.resolve(__dirname, "src/pages/"),
        "@images": path.resolve(__dirname, "src/images/"),
        "@context": path.resolve(__dirname, "src/context/"),
        "@hooks": path.resolve(__dirname, "src/hooks/"),

    },
    plugins: {
        add: [] /* An array of plugins */,
        remove: [] /* An array of plugin constructor's names (i.e. "StyleLintPlugin", "ESLintWebpackPlugin" ) */,
    },
    configure: {
        /* Any webpack configuration options: https://webpack.js.org/configuration */  
    }
},
plugins: [
    {
        plugin: CracoAntDesignPlugin,
        options: {
            customizeThemeLessPath: path.join(
                __dirname,
                './src/antd.customize.less'
            ),
        },
    }
]

};

Any pointers on how to solve this would be great!

[flyingcrp]

got the same error in cra5 and craco6.x

"antd": "^4.18.4",
"@craco/craco": "^6.4.3",
"craco-antd": "^1.19.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",

[nerdess]

@flyingCrp I fixed the issue by removing craco-antd and switching to craco-less. Check out my comment here which also includes my craco.config.js: https://github.com/DocSpring/craco-antd/pull/75

[flyingcrp]

@flyingCrp I fixed the issue by removing craco-antd and switching to craco-less. Check out my comment here which also includes my craco.config.js: #75

yes! thanks for your reply . i got it

[kamronbatman]

This is fixed in #75 using my package @mrbatman/craco-antd if you want to stick to using this package.

[nerdess]

@kamronbatman switched back to your version until your PR gets merged.

One odd thing I noticed: When I change a variable in antd.customize.less and restart my app so that the new variables get picked up they don't. I need to rename the file antd.customize.less into sth else (e.g. antd.customize1.less), change the theme path in craco.config.js to the renamed filename > restart > only then the variables get picked up. It seems like some kind of caching issue (in webpack?? in craco??).

Afaik there is no way in order to pick up changed les variables than to restart the server. But having to also rename the file is really crazy :D Any hints would be cool in case you have the same isssue.

[kamronbatman]

I have the same problem. I ended up getting rid of craco-antd and craco-less because I could not find a solution.

[nerdess]

@kamronbatman hm, how are you embedding antd in your create-react-app then? afaik antd needs less for customisation (which is a shame since i prefer sass). I really don't want to eject the project either.

[kamronbatman]

@kamronbatman hm, how are you embedding antd in your create-react-app then? afaik antd needs less for customisation (which is a shame since i prefer sass). I really don't want to eject the project either.

Great question. I ended up using craco and less-loader directly. Then making a less file, importing the antd less files, making my changes, then importing that file manually into the root App.tsx.

[nerdess]

looks like https://www.npmjs.com/package/@mrbatman/craco-antd is gone and has been merged into the initial craco-antd package. so using this package is fine again :)

[tdevthairun]

looks like https://www.npmjs.com/package/@mrbatman/craco-antd is gone and has been merged into the initial craco-antd package. so using this package is fine again :)

it not work for me