docspring / craco-antd Goto Github PK

I have a couple of files that set up the theme and style variables for my App. I have them each in their own file and I import one another using the import syntax. I keep getting this compilation error when using customizeTheme and starting the App:

eg: let´s assume it says  import fontSize from "./fontSize"
SyntaxError: Cannot use import statement outside a module

The config is as follows:

const CracoAntDesignPlugin = require("craco-antd");
const { customVariables } = require("./src/styles/styles");

module.exports = {
    plugins: [
        {
            plugin: CracoAntDesignPlugin,
            options: {
                customizeTheme: {
                customVariables,
                },
                javascriptEnabled: true,
            },
        },
    ],
};

Project worked fine with antd version 3.26.18 and craco-antd 1.11.0.

Followed the migration guide by Antd to upgrade antd to 4.5.3 but got the following error when trying to compile.

/Users/xxx/node_modules/@ant-design/icons/lib/components/Icon.d.ts(19,78):
TS2344: Type '"max" | "required" | "low" | "high" | "disabled" | "default" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | ... 345 more ... | "wmode"' does not satisfy the constraint '"max" | "required" | "low" | "high" | "disabled" | "default" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | ... 345 more ... | "wmode"'.
  Type '"translate"' is not assignable to type '"max" | "required" | "low" | "high" | "disabled" | "default" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | ... 345 more ... | "wmode"'.

I suspected issue with @types/react: 16.8.20, but not sure if that's the problem.

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!

I am unable to start my app unless I failed to follow instructions. The error is:
context.env === "production" ? sassRule.loader : sassRule.use;

package.json:

  "dependencies": {
    "@craco/craco": "^2.4.0",
    "antd": "^3.11.0",
    "craco-antd": "^1.5.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "^2.1.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

craco.config.js

const CracoAntDesignPlugin = require("craco-antd");

module.exports = {
  plugins: [{ plugin: CracoAntDesignPlugin }]
};

Any ideas?

Is this package still maintained?

Not compatible with react-scripts 5.0.0 😥 https://www.npmjs.com/package/react-scripts/v/5.0.0

yarn start output

(node:81909) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'push' of undefined
    at Object.overrideWebpackConfig (app/node_modules/craco-less/lib/craco-less.js:141:34)
    at Object.overrideWebpackConfig (app/node_modules/craco-antd/lib/craco-antd.js:64:26)
    at overrideWebpack (app/node_modules/@craco/craco/lib/features/plugins.js:42:40)
    at app/node_modules/@craco/craco/lib/features/plugins.js:64:29
    at Array.forEach (<anonymous>)
    at applyWebpackConfigPlugins (app/node_modules/@craco/craco/lib/features/plugins.js:63:29)
    at mergeWebpackConfig (app/node_modules/@craco/craco/lib/features/webpack/merge-webpack-config.js:110:30)
    at overrideWebpackDev (app/node_modules/@craco/craco/lib/features/webpack/override.js:11:36)
    at app/node_modules/@craco/craco/scripts/start.js:27:5
(Use `node --trace-warnings ...` to show where the warning was created)
(node:81909) UnhandledPromiseRejectionWarning: Unhandled promise rejection. 
This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise 
which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag 
`--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:81909) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections 
that are not handled will terminate the Node.js process with a non-zero exit code.

my package.json

  "devDependencies": {
    "@craco/craco": "^6.4.3",
    "craco-alias": "^3.0.1",
    "craco-antd": "^1.19.0",
    "craco-sass-resources-loader": "^1.1.0",
    "typescript": "^4.5.2"
  }

my craco.config.js (only 3 plugins)

// * Craco docs
// * https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md
// * Plugins
const CracoAntDesignPlugin = require('craco-antd');
const sassResourcesLoader = require('craco-sass-resources-loader');
const CracoAlias = require('craco-alias');

const path = require('path');

const pathResolve = (pathUrl) => path.join(__dirname, pathUrl);

module.exports = {
  reactScriptsVersion: 'react-scripts',

  // Don't reorder plugins
  plugins: [
    {
      // https://www.npmjs.com/package/craco-antd
      plugin: CracoAntDesignPlugin,
      options: {
        customizeThemeLessPath: pathResolve('./src/styles/antd/theme.less'),
      },
    },
    {
      // https://www.npmjs.com/package/craco-sass-resources-loader
      plugin: sassResourcesLoader,
      options: {
        resources: './src/styles/core.scss',
      },
    },
    {
      // https://www.npmjs.com/package/craco-alias
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        // baseUrl SHOULD be specified
        // plugin does not take it from tsconfig
        baseUrl: './',
        // tsConfigPath should point to the file where "baseUrl" and "paths" are specified
        tsConfigPath: './tsconfig.extend.json',
      },
    },
  ],
};

I commented CracoAntDesignPlugin & tried re-run yarn start and my app was built/ran correctly.

My temporary fix:

returned to version "react-scripts": "4.0.3"
I will wait for updates. Thanks

Does it work for antd-mobile?

Since version 1.17, less variables specified in files antd.customize.json, antd.customize.less or directly in customizeTheme does not seem to work.

Only lessLoaderOptions.modifyVars works.

Tested with craco-antd 1.17, craco-less 1.16, antd 4.3.0

package.json

{
"name": "fund-supervise",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^5.2.4",
"@types/jest": "24.0.17",
"@types/node": "12.7.0",
"@types/react": "16.8.24",
"@types/react-dom": "16.8.5",
"@types/react-router-dom": "^4.3.4",
"antd": "^3.21.2",
"axios": "^0.19.0",
"babel-plugin-import": "^1.12.0",
"compression-webpack-plugin": "^3.0.0",
"craco-antd": "^1.11.0",
"customize-cra": "^0.4.1",
"echarts": "^4.2.1",
"mobx": "^5.13.0",
"mobx-react": "^6.1.3",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-app-rewired": "^2.1.3",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"typescript": "3.5.3",
"webpack-bundle-analyzer": "^3.4.1"
},
"scripts": {
"eject": "react-scripts eject",
"start": "craco start",
"build": "craco build",
"test": "craco test"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.4.4"
}
}

how come that,what should i do

I'm going to build a React app,Less is used.I'm trying to use className={styles.app}，But I didn't get the results I wanted，How can I do that？

2 days ago craco-less upgraded less-loader from 5 to 6 that has a braking change.

This causes the following error:

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'javascriptEnabled'. These properties are valid:
   object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }

There are 2 fixes that can be done:

1. Pin the version of craco-less to 1.16.0
2. Use the new lessOptions as described here

I would like to be able to access the Ant Design variables (which are written in Less) within a styled component. Something like this:

const StyledButton = styled(Button)`
  background-color: @primary-color
`

how can I achieve this?

`
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const WebpackBar = require("webpackbar");
const CracoAntDesignPlugin = require("craco-antd");
const path = require("path");

// Don't open the browser during development
process.env.BROWSER = "none";

module.exports = {
webpack: {
plugins: [
new WebpackBar({ profile: true }),
...(process.env.NODE_ENV === "development"
? [new BundleAnalyzerPlugin({ openAnalyzer: false })]
: [])
]
},
plugins: [
{ plugin: require("craco-preact") },
{
plugin: CracoAntDesignPlugin,
options: {
customizeThemeLessPath: path.join(
__dirname,
"src/styles/antd-custom.less"
)
}
}
]
};

`

And my .less file didn't work

Hey! Really like the craco, and the antd plugin I think its exactly what I need.
I'm building a new app with CRA with TypeScript, inside Electron and Antd as UI framework.
So far everything is working and I can modifly Antd variables with my custom .less file with the following craco.config.electron.js:

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

module.exports = {
  webpack: {
    configure: {
      target: "electron-renderer"
    },
    plugins: [new WebpackBar({ profile: true })]
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeThemeLessPath: path.join(
          __dirname,
          "src/styles/antdCustom.less"
        )
      }
    }
  ]
};

The problem is that I also want to use ".less" and ".module.less" files for sytlying my react components, and use some of the colors provided by antd, so it would be rellay nice to use less instead of plain css. But I cant get it to work, I read all the issues in craco-less and craco-antd.
I'm sure its just a simple config in the "CracoAntDesignPlugin" but I'm fairly new in this webpack environment.
Tried several settings but usually get this error:

[build:electron] ./src/App.module.less 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .App {
|   text-align: center;
| }

The relevant parts of my package.json:

"scripts": {    
    "build:electron": "env-cmd -f .env.electron craco build --config craco.config.electron.js"   
  },  
  "dependencies": {
    "@craco/craco": "^5.2.1",
    "@types/jest": "24.0.13",
    "@types/node": "12.0.3",
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4",
    "antd": "^3.19.8",
    "craco-antd": "^1.11.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "typescript": "3.5.1"
  }, 
  "devDependencies": {
    "electron": "5.0.2",
    "electron-builder": "20.41.0",
    "env-cmd": "9.0.2",
    "npm-watch": "0.6.0",
    "webpackbar": "^3.2.0"
  }

Or mabye I'm importing incorrectly in my App.tsx
import classes from "./App.module.less";

Any help would be appreciated to find the missing config I need.

From: dilanx/craco#57

We recently moved over to craco from react-app-rewired, in conjunction with ant-design. However the css is applied differently when running locally compared to running the completed build. Below is the contents of the craco.config.js file.
test
const CracoAntDesignPlugin = require('craco-antd');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const WebpackBar = require('webpackbar');
module.exports = {
plugins: [{ plugin: CracoAntDesignPlugin }],
webpack: {
plugins: [
new WebpackBar({ profile: true }),
],
},
};

Is this the correct way to ensure that the ant-d styles will be applied last, or have I missed something?

Hi ! I'm trying to use craco-antd with CRA 2.0. The styles for the components are not loading.

package.json

"dependencies": {
    "@craco/craco": "^3.2.3",
    "antd": "3.11.6",
    "craco-antd": "^1.9.3",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },

craco.config.js

const CracoAntDesignPlugin = require("craco-antd");

module.exports = {
  plugins: [{ 
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          "@primary-color": "#1DA57A",
          "@link-color": "#1DA57A"
        }
      } 
    }]
};

craco-antd is a great way to provide a custom theme for Ant with a project created by create-react-app. I think the next logical step for many projects is being able to consume the Ant less styles from within an SCSS-enabled CRA-based app. AntdScssThemePlugin is a project that enables doing such, by hooking into the less and sass loaders.

Since craco-antd also pulls in craco-less, it has all the key components to support AntdScssThemePlugin. I think it'd be helpful if the documentation showed how to do so.

I realize docs like this may not be an exact fit because it includes an external project. However, I think it's in keeping with the goals of this project and that documentation should live somewhere semi-official, instead of someone's blog.

Use craco test results in the error:

Test suite failed to run

    /Users/xxx/sources/proj/node_modules/antd/es/card/style/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import '../../style/index.less';
                                                                                                    ^^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected string

      10 |   AutoComplete,
      11 |   message,
    > 12 |   Select
         | ^
      13 | } from "antd";
      14 | import axios from "axios";

Problem resolved when I changed back to react-scripts test.

BTW, craco start works fine.

Env

"craco-antd": "^1.9.3",
"@craco/craco": "^3.2.3",
"antd": "^3.11.6",
"react-scripts": "^2.1.1"

// craco.config.js

const CracoAntDesignPlugin = require("craco-antd");

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          "@primary-color": "#8440bd"
        }
      }
    }
  ]
};

Thank you!

Is there a way to influence in which order the stylesheets are imported?

This is my current craco.config.js using CRA5 with Antd3 with the CRA5 supporting branch https://github.com/kamronbatman/craco-antd/tree/kbatman/update_craco-antd.

const CracoAntDesignPlugin = require('@mrbatman/craco-antd')

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            math: 'always'
          }
        }
      }
    }
  ]

I also use tailwindcss and custom css overwrides, unfortunately craco-antd seems to include antd at last.
This means I have to use important: true flag for tailwindcss and have to use !important everywhere, if I try to override any antd styling.
Is there any way to achieve that antd is included before my import './styles/global.scss' in index.jsx, so my custom css has a higher priority?

I found this post about this issue, but no response: https://stackoverflow.com/questions/63506391/reactjs-craco-antd-rule-priority-rule-mismatch
Isn't that a main issue for most people? In most cases there are needs to somehow overwrite or extend specific styles or to just append a tailwind class to increase a margin…

I am trying to override @collapse-content-padding

This is my craco.config.js:

const CracoAntDesignPlugin = require("craco-antd");

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          "@primary-color": "#1DA57A",
          "@link-color": "#1DA57A",
          '@collapse-content-padding:': '0px' ,
        },
      },
    },
  ],
};

if I remove the line with that customization and just leave the other 2, it works fine.

with '@collapse-content-padding:': '0px' , I get this error:

./node_modules/antd/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-9-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-9-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-9-4!./node_modules/antd/dist/antd.less)
Error: resolve-url-loader: CSS error
  file://path/to/project/node_modules/antd/lib/collapse/style/index.less:96:6: Double colon
You tried to parse Less with the standard CSS parser; try again with the postcss-less parser
  You tried to parse Less with the standard CSS parser; try again with the postcss-less parser

fwiw, here is the antd .less it is referencing:

  &-content {
    color: @text-color;
    background-color: @collapse-content-bg;
    border-top: @border-width-base @border-style-base @border-color-base;

    & > &-box {
      padding: @collapse-content-padding; // this line
    }

    &-hidden {
      display: none;
    }
  }

Somehow this customization is putting in a second colon? I don't get what I am doing wrong or why the other 2 customized variables work fine...

see https://github.com/dilanx/craco/releases/tag/v7.0.0

I think it's now possible to roll out a new version of craco-antd with craco 7 as peerDependency

How can I enable dark theme through using craco?

https://github.com/FormAPI/craco-antd/blob/093f672d29a43f1b2060c4393131500be69353a7/lib/craco-antd.js#L59

Setting the value of style to true makes it work.

I have a CRA 2.1.1 app and I've followed your setup step by step. I'm using your production-version of craco.config.js but without the pract plugin.

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const WebpackBar = require("webpackbar");
const CracoAntDesignPlugin = require("craco-antd");
const path = require("path");

// Don't open the browser during development
process.env.BROWSER = "none";

module.exports = {
  webpack: {
    plugins: [
      new WebpackBar({ profile: true }),
      ...(process.env.NODE_ENV === "development" ? [new BundleAnalyzerPlugin({ openAnalyzer: false })] : [])
    ]
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeThemeLessPath: path.join(__dirname, "src/styles/antd/custom-theme.less")
      }
    }
  ]
};

I'm only using a few components from antd. Those components are rendered after some authentication process is completed. As soon as those components are rendered, all the antd stylesheets are injected in the document and overriding my variables.

So, it seems babel-plugin-import is not properly working because it should only load the css related to the components I'm using right?
Also, the variables are overwritten when the styles are injected.

Any ideas?

After adding plugin getting such error, only in build, development works well

./src/assets/styles/index.less
ModuleNotFoundError: Module not found: Error: Can't resolve './font/Museo/Museo-300.eot' in 'C:\Users\gagul\WebstormProjects\vsbl\src\assets\styles'

assets/styles/index.less
@import "./fonts/index.less";

assets/styles/fonts/index.less
@import "./Museo.less";

assets/styles/fonts/Museo.less

@font-face {
    font-family: 'Museo';
    src: url('../../font/Museo/Museo-300.eot');
    src: url('../../font/Museo/Museo-300.eot?#iefix') format('embedded-opentype'),
    url('../../font/Museo/Museo-300.woff2') format('woff2'),
    url('../../font/Museo/Museo-300.woff') format('woff'),
    url('../../font/Museo/Museo-300.ttf')  format('truetype'),
    url('../../font/Museo/Museo-300.svg#Museo-300') format('svg');
}

all fonts are stored in assets/font

without plugin works great

Is it possible to use this to edit the colour dynamically for use with toggling a dark theme or other colours?

https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0 seems to be what I need but it uses rewire instead of craco

Hi,

The way to use default colors in antd is to import '~antd/lib/style/themes/default.less' in one of your less files.

I tried to import the base color file from @import '~/antd/lib/style/color/colors'; in the theme.less but it's ignored (which I assume is normal behaviour).

Is there any other way than to compile the colors to hex and put them at the top of the file, or to import the file in my code outside theme.less (which is not optimal since I need colors to redefine some variables) ?

The last tag or release for this project was for 1.14.1, but NPM currently has 1.18.0. If not too much of a hassle, it'd be helpful if there were tags with release notes. Unfortunately, the project doesn't have a changelog that I could find, so the only way to tell what's changed is to read the git log in reverse order. Without tags, however, it's hard to see what's changed between versions since 1.14.1 because there's no SHA associated with them.

I've updated my package.json as shown in the test app, so I have:

"scripts": {
  "test": "craco test"
}

With this change, my test suite no longer runs. I went and checked out the craco-antd test app and I can't get yarn test to work there either. It looks like the less compiler isn't being invoked when it should :

 FAIL  src/App.test.tsx
  ● Test suite failed to run

    /home/nirvdrum/dev/workspaces/craco-antd/test-app/node_modules/antd/es/button/style/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import '../../style/index.less';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      10 | };
      11 | 
    > 12 | class App extends Component<any, State> {
         | ^
      13 |   state: State;
      14 | 
      15 |   constructor(props: any) {

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (src/App.tsx:12:1)

Antd styles changes too

"@craco/craco": "^3.2.3", "antd": "^3.11.6", "react-scripts": "2.1.1", "craco-antd": "^1.9.3",

"craco-antd": "^1.18.1",
"antd": "^4.6.3",
"craco-less": "1.17.0"

Hi !

Updating to CRA 3.4.x results in the production app raising with this log trace:

/app/node_modules/@craco/craco/lib/plugin-utils.js:29
    throw new Error(
    ^

Error: Found an unhandled loader in the production webpack config: /app/node_modules/style-loader/index.js

This error probably occurred because you updated react-scripts or craco. Please try updating craco-less to the latest version:

   $ yarn upgrade craco-less

Or:

   $ npm update craco-less

If that doesn't work, craco-less needs to be fixed to support the latest version.
Please check to see if there's already an issue in the FormAPI/craco-less repo:

   * https://github.com/FormAPI/craco-less/issues?q=is%3Aissue+webpack+unknown+rule

If not, please open an issue and we'll take a look. (Or you can send a PR!)

You might also want to look for related issues in the craco and create-react-app repos:

   * https://github.com/sharegate/craco/issues?q=is%3Aissue+webpack+unknown+rule
   * https://github.com/facebook/create-react-app/issues?q=is%3Aissue+webpack+unknown+rule

    at throwUnexpectedConfigError (/app/node_modules/@craco/craco/lib/plugin-utils.js:29:11)
    at throwError (/app/node_modules/craco-less/lib/craco-less.js:14:5)
    at /app/node_modules/craco-less/lib/craco-less.js:119:7
    at Array.forEach (<anonymous>)
    at Object.overrideWebpackConfig (/app/node_modules/craco-less/lib/craco-less.js:51:11)
    at Object.overrideWebpackConfig (/app/node_modules/craco-antd/lib/craco-antd.js:63:26)
    at overrideWebpack (/app/node_modules/@craco/craco/lib/features/plugins.js:42:40)
    at /app/node_modules/@craco/craco/lib/features/plugins.js:64:29
    at Array.forEach (<anonymous>)
    at applyWebpackConfigPlugins (/app/node_modules/@craco/craco/lib/features/plugins.js:63:29)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `craco start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /app/.npm/_logs/2020-04-30T08_11_08_192Z-debug.log

I tried to PR craco-antd to use the latest version of craco-less, but it looks like we should also update react-scripts, am I right ?
#28

Thanks !

"@craco/craco": "^6.4.5" asking to change "@craco/craco": "^6.4.3", does not make sense , right ?

Hi,

first of all, thanks for your work. Using CRA 2.x with Antd is super easy now.
However, trying to start an app using the approach described in the installation guide
will throw an immediate error, stating:

Cannot find module babel-plugin-import from '...'

This is easily resolved by installing babel-plugin-import manually.
Looking at the readme, I assume that's not the indended way of installing craco-antd, as it states:

craco-antd includes:

• Less (provided by craco-less)
• babel-plugin-import to only import the required CSS, instead of everything
• A nicer way to customize the theme. Save your modified variables in antd.customize.json

I would therefore recommend shipping craco-antd with babel-plugin-import (no clue, how to do that. Simply install the plugin as a dev dependency (?)) or advising users to install the plugin manually.

Reproduction: https://github.com/unzico/craco-antd-plugin-missing
git clone https://github.com/unzico/craco-antd-plugin-missing
cd craco-antd-plugin-missing
yarn
yarn start

Thank you, have a nice weekend.

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

• configuration.plugins[1] misses the property 'apply'. Should be:
  function
  -> The run point of the plugin, required method.

"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0",
"webpack-merge": "^5.8.0"
"craco-antd": "^2.0.0",
colud this be fixed? Thanks any way.

I am customizing my ant design app using craco-antd which works very well :)

Now I'd like to use antd less variables inside the various .less files of my components. So that I can do stuff like e.g:

.card { padding-top: @padding-md; }

I am able to get it to work when I add

@import 'antd/dist/antd.less';

at the top of each .less file that uses an antd variable but that seems quite cubersome. Is there no way to add the variables globally?

npm install does not work with current versions of dependencies:
@craco/craco: 5.2.1
antd: 3.19.1
react-scripts: 3.0.1

We get contention on versions of craco by craco-antd and craco-less form react-scripts.

In npm 7+, the latest release #73 currently doesn't work without install --force because @craco/[email protected] requires react-scripts@^4.0.0 (npm 7 has stricter requirements for peer dependencies). In essence, you will have to wait for craco to update their project to support react-scripts@5. There is an alpha release that will do that: @craco/[email protected] but it will require craco-antd to change it's dependency requirement from [email protected] to the alpha release. And obviously you will have to be comfortable with using an alpha release.

Hi @ndbroadbent , @patricklafrance !

I am trying to get CSS Modules to work as well as antd.

So far, I either have antd's styles working, or CSS Modules, but I can't get both to work at the same time.

To get antd's styling to work, I have to comment out cssLoaderOptions... (see in my code below), but then CSS Modules don't work anymore.

If I leave cssLoaderOptions, CSS Modules work, but antd seems to lose some styling. For example, I can still see some animation when clicking on a button, but the color styling and shaping is gone.

Here's a link to my repo.

const CracoAntDesignPlugin = require("craco-antd");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const WebpackBar = require("webpackbar");

// Don't open the browser during development
process.env.BROWSER = "none";

module.exports = {
  webpack: {
    plugins: [
      new WebpackBar({ profile: true }),
      ...(process.env.NODE_ENV === "development"
        ? [new BundleAnalyzerPlugin({ openAnalyzer: false })]
        : []),
    ],
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,

      options: {
        modifyLessRule: function(lessRule, _context) {       
          lessRule.test = /\.less$/;
          lessRule.exclude = undefined;

          // console.log('lessRule', lessRule)
          // console.log('JSON', JSON.stringify(lessRule.use))        

          return lessRule;
        },       

        // CSS Modules. This makes the styling of antd to stop working. If I comment out, antd's styling works.
        cssLoaderOptions: {
          modules: true,
          localIdentName: `${
            process.env.NODE_ENV === "production"
              ? "[local]_[hash:base64:5]"
              : "[path][name]__[local]-"
          }-[hash:base64:8]`,
        },
      },
    },
  ],
};

I'm using those versions:

"@craco/craco": "5.0.2",
"antd": "^3.16.6",
"craco-antd": "1.10.0",
"react-scripts": "3.0.0",
"typescript": "^3.4.5"

This is the bundle analyzer when antd works (when I comment out cssLoaderOptions), 2.44Mb:

This is when CSS Module work (2.36Mb)

Thank you for this awesome project, It saved me a lot of time!

I'm using it to configure custom themes for my app and noticed that editing theme's *.less file won't trigger webpack's recompilation. I have to restart the webpack process to see the result.

Is it possible to make recompile for *.less files work?

Hi, I need help.
Why customize theme not work as expected?
Am I missing some configuration?
I have configured craco.config.js as seen as below

and my package.json

{
  "name": "resist",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^3.2.2",
    "antd": "^3.11.2",
    "craco-antd": "^1.9.3",
    "craco-preact": "^1.1.0",
    "preact": "^8.3.1",
    "preact-compat": "^3.18.4",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-hot-loader": "^4.6.3",
    "react-scripts": "2.1.1",
    "unistore": "^3.1.0"
  },
  "scripts": {
    "start": "nodemon -w ./antd.customize.less --exec 'craco start'",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "nodemon": "^1.18.9"
  }
}

Is it possible to use media queries like the following in the customizeTheme property?

@media screen and (max-width: 768px) {
  .ant-layout-header , .ant-layout-content {
    padding: 0 24px !important
  }
}

Not sure if it's related to this plugin but running craco test is not allowing my tests to pass. I am using create-react-app with typescript. I get the following error

node_modules/antd/lib/style/index.less:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import './themes/index';
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (node_modules/antd/lib/row/style/index.js:3:1)

This is what my config looks like

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: antOverrides,
      },
    },
  ],
  jest: {
    configure: {
      transformIgnorePatterns: ['node_modules[/\\\\](?!@amcharts[/\\\\]amcharts4)'],
    },
  },
};

    "@craco/craco": "^5.7.0",
    "antd": "^4.6.4",
    "craco-antd": "^1.18.1",

craco-antd is coded to require craco ^5.5.0 and fails to install if using craco@6

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @craco/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"6.1.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @craco/craco@"^5.5.0" from [email protected]
npm ERR! node_modules/craco-antd
npm ERR!   craco-antd@"1.19.0" from the root project

Hello,

Thx for this plugin.
Unfortunately, I didn't manage to make it work with typscript.

Here is my craco config :

const CracoAntDesignPlugin = require('craco-antd')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const WebpackBar = require('webpackbar')

module.exports = {
	webpack: {
		plugins: [
			new BundleAnalyzerPlugin(),
			new WebpackBar({ profile: true }),
		],
	},
	plugins: [{ plugin: CracoAntDesignPlugin }],
}

If I run yarn run start :

Failed to compile.

./src/index.tsx
Module not found: Can't resolve 'resources/main.less' in '/home/arhia/Documents/projects/payroll-app-next/client/src'

My previous config with react-app-rewired was :

const { injectBabelPlugin } = require('react-app-rewired')
const rewireLess = require('react-app-rewire-less')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const rewireTsJest = require('react-app-rewire-ts-jest')
const WebpackBar = require('webpackbar')

module.exports = {
	webpack: function (config, env) {

		const path = require('path')
		// For import with absolute path
		config.resolve.modules = [path.resolve('src')].concat(config.resolve.modules)

		config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config)  // change importing css to less

		const options = {
			javascriptEnabled: true,
			// We use modifyVars option of less-loader here, you can see a orange button rendered on the page after reboot start server.
			modifyVars: {
				"@primary-color": "#f48b31",
				"@font-size-base": "16px",
				"@font-family": "Nunito",
				"@layout-header-background": "#fff",
				"@layout-trigger-color": "#565558",
				"@layout-trigger-background": "#fff"
			},
		}
		config = rewireLess.withLoaderOptions(options)(config, env)

		/*
		=== webpack plugins ===
		Note : we prefer to add new webpack plugins here by ourselves as following, rather than using third-party helpers like rewire-some-plugin-XXX
		because they add an unecessary abstraction only to add a plugin in config.plugins array
		*/
		config.plugins = (config.plugins || []).concat([
			new BundleAnalyzerPlugin(),
			new WebpackBar({
				profile: true,
			})
		])

		return config

	},
	jest: function (config) {

		// placeholder
		const configTsJest = {}
		config = rewireTsJest(config, configTsJest)
		config = {
			...config,
			reporters: [
				"default",
				["./node_modules/jest-html-reporter", {
					pageTitle: "Payroll-app-next: Tests suite",
					outputPath: "tests/report/index.html",
					includeFailureMsg: true,
					dateFormat: "dd/mm/yyyy HH:MM",
					sort: 'status'
				}]
			],
			collectCoverage: true,
			collectCoverageFrom: [
				"src/**/*.{ts,tsx}"
			],
			coveragePathIgnorePatterns: [
				"src/state/state.d.ts"
			],
			coverageReporters: [
				"html",
				"json"
			]
		}

		return config
	}
}

Have you any idea to resolve this issue ?

Hi all,

I have been using craco-antd for our app and recently I started having issues with less compilation.
Basically, it generates two copies of the antd css, one with my custom colours, one with the default. The default being generated last, it overrides my custom settings.

The way I have been doing it so far might not be canonical but I needed to do it like that. Here is what I have in the less root file

@import 'antd/dist/antd.less';

@link-color: #ff0000;
@primary-color: #00ff00;

This used to work fine until recently. Maybe linked to upgrade to craco-less 2.0 but not sure.

What is weird is that if I use craco-less instead, it works fine.
To be clear, this works:

const CracoLessPlugin = require('craco-less');

module.exports = function cracoConfig({ env }) {
  return {
    plugins: [
      {
        plugin: CracoLessPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      },
    ],
  };
};

But this fails:

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

module.exports = function cracoConfig({ env }) {
  return {
    plugins: [
      {
        plugin: CracoAntDesignPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      },
    ],
  };
};

Here is a small reproduction repo from a brand new create-react-app: https://github.com/MaxDNG/craco-antd-issue

I try to find the issue but did not succeed so far. Will keep looking later on.

Hi,

Using this plugin, I've just updated antd and @ant-design/pro-tables to the current last versions.

But I'm facing the issue where no longer the internationalization configuration is working almost like this issue:

ant-design/pro-table#256 (comment)

After a lot of test and failure I found the issue is here:

https://github.com/DocSpring/craco-antd/blob/master/lib/craco-antd.js#L91

Changing manually the libraryDirectory from "lib" to "es" seems to fix the error.

Is there a way to make that libraryDirectory modifiable by the user ?

I can help with a PR if you agree :)

Thanks in advance.

Hi!

I've tried craco-antd to customize default antd theme and it works great!

However, I have a question about further customization of antd components:

I use default CRA configuration with CSS modules and do not use Less (except for configuring antd).
In my app I use a Header component and I want to add a bottom border to it. I also want this border to have a color corresponding to the current theme, which is stored under @border-color-base less variable.
Since default antd theme does not apply any border to Header, how can I achieve this?
The perfect way for me is to set the color from a css-variable, but how can I create one?
Defining plain new set of css variables with same values as in Less seems a bad idea as it breaks DRY principle.
How can I translate a set of Less variables to a set of CSS variables?
In other words, I want to be able to use antd color scheme without using Less in my project.

Thanks in advance for your help!

I'm trying to override the antd less variable

Follow through the instruction from README, however this error occurred while running npm start:

 - options has an unknown property 'noIeCompat'. These properties are valid:
   object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }

I've try to get rid of this error for a while, can anyone shed me some light...

Steps to reproduce:

npx create-react-app test-project
cd test-project
npm install antd @craco/craco craco-antd

#modify package.json
...
+  "start": "craco start",
...

#add craco.config.js to project root
const CracoAntDesignPlugin = require("craco-antd");

module.exports = {
    plugins: [
        { 
            plugin: CracoAntDesignPlugin,
            options: {
                customizeTheme: {
                    "@primary-color": "#ff0000"
                },
                lessLoaderOptions: {
                    noIeCompat: true
                }
            }
        },
    ],
};

# dependencies
"@craco/craco": "^6.1.2",
"craco-antd": "^1.19.0",
"antd": "^4.15.6",
"react": "^17.0.2",
"react-scripts": "4.0.3",

# run 
npm start

Thanks in advance!!