ant-design/create-react-app-antd

Use antd in create-react-app without ejecting ✨

Use antd in create-react-app ✨

Create React App + Ant Design.

Step by Step Documentation

• 🇺🇸 English: https://ant.design/docs/react/use-with-create-react-app
• 🇨🇳 中文：https://ant.design/docs/react/use-with-create-react-app-cn

Preview

$ npm install
$ npm start

or:

$ yarn
$ yarn start

See more

• antd
• create-react-app
• craco
• craco-less

---

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

create-react-app-antd's Issues

Failed to compile

./node_modules/antd/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./node_modules/antd/es/button/style/index.less)
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 'source'. These properties are valid:
  object { lessOptions?, prependData?, appendData?, sourceMap? }

after do this, a blue button on my pages, why it isn't green?

https://ant.design/docs/react/use-with-create-react-app-cn

Customize Theme

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

'exclude' of undefined

Switch from react-app-rewired to craco-antd

As we know, react-app-rewired won't be updated to work with CRA v2. Even though it works today, it might break tomorrow.

There's a new library for overriding CRA configuration called craco. And there's a preset specifically to add full antd support.

Check it out: https://github.com/FormAPI/craco-antd

I could send a PR if you are willing to merge it.

After customizing the AntD theme Drawer is not working

After customizing the AntD theme Drawer is not working

请问，此项目是不是antd使用create-react-app的官方脚手架？

antd 使用 create-react-app 的文档是 https://ant.design/docs/react/use-with-create-react-app-cn，此项目是不是按照此文档进行的配置呢？

如果我的项目只使用antd的组件，是不是可以直接使用此脚手架而不需要从 create-react-app 自己配置？

template update

Unfortunately react-app-rewired is outdated and does not support CRA 2.0.
react-app-rewired shows some alternatives. One of those is craco. It is really easy to setup and offers recipes and plugins. With the use of craco and a plugin it is really easy to setup CRA with antd.

Here my template with create-react-app, antd & craco:
https://github.com/florianwiech/react-antd-setup

I think this is a cleaner solution. If you want, you can use it for this template. ✌️

按需加载的路由组件内部的antd样式build时失效

运行

yarn run build

使用getComponent加载的路由组件内的antd组件css不会被打包。但在index.js中import的组件的antd的css会正常打包

ERROR in ./node_modules/rc-trigger/es/index.js

Hi, I'm getting the following error when importing button styles

"Compiled with problems:
ERROR in ./node_modules/rc-trigger/es/index.js 702:0-29
export 'BuildInPlacements' (reexported as 'BuildInPlacements') was not found in './interface' (module has no exports)"

Screenshot

为什么添加Upload组件后报错，Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Any options for typescript?

Any options for support typescript?

node6.10.3报错

node6.10.3环境下，以下文件(config-overrides.js)报错。

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#25b864' },
}),
);

error:

D:\github\create-react-app-antd\config-overrides.js:13
);
^
SyntaxError: Unexpected token )
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (D:\github\create-react-app-antd\node_modules\react-app-rewired\config-overrides.js:5:18)

babel-loader not found

I just download the repo and executed yarn install and yarn start. Unfortunately the Button on the web page is not styled with antd.

There is no error, but in the console it says "babel-loader not found". Adding it to the dependencies did not work.

Any ideas on how to fix that?

为什么 build 要这么久?

$ react-app-rewired build
Creating an optimized production build...
✨ Done in 105.41s.

Importing AntD CSS

First, thank you so much for starting to support the UNIX ethos by making AntD integrate with create-react-app for those who might be intimidated by the full DVa experience. I'm very much looking forward to using this incredible library!

Question: Are you now looking into separating antd from dva for non saga users and users of react-router v4?

(edit: sorry about the initial css question. I made a stupid syntax error)

Fails to work with Storybook.js

Hi Team ant-design,

I tried using the storybook.js to develop the ant-design components for our app in isolation but it seems even after using config-overrides.js it doesn't work wrt javascriptEnabled options.

Steps to reproduce:

  git clone https://github.com/ant-design/create-react-app-antd.git
  cd create-react-app-antd/
  rm -rf package-lock.json 
  yarn 
  npx -p @storybook/cli sb init
  yarn storybook
 

The when we go to the indicated URL the CSS or JavaScript rendered CSS even in Storybook basic example doesn't work.

One a non-CRA project, it works fine
https://github.com/davidsonsns/storybook-antd

Please let me know how to resolve this config issue.

styles

problem: styles object in the following code does not fill

import styles from './App.less';

const UIFooter = () => {
  return (
       <div className={styles.links}>
  );
};

but the following code is ok

import styles from './App.less';

const UIFooter = () => {
  return (
       <div className="links">
  );
};

how we can change the config of the app in order the former code also work?

没有效果啊 打出来的包还是很大

 "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

用这个 打包是

318.02 KB  build/static/js/2.4b1709c5.chunk.js
  24.66 KB   build/static/css/2.a3a7d6af.chunk.css
  886 B      build/static/js/main.070194f8.chunk.js
  761 B      build/static/js/runtime~main.fdfcfda2.js
  540 B      build/static/css/main.bc5faf9d.chunk.css

然后我用正常的方式进行打包 结果如下

 "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "react-app-rewired start",
    "build": "react-scripts build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

这样打包之后是

File sizes after gzip:

  317.41 KB (-624 B)  build/static/js/2.41b2fbe2.chunk.js
  866 B (-20 B)       build/static/js/main.f77c20b0.chunk.js
  761 B               build/static/js/runtime~main.fdfcfda2.js
  540 B               build/static/css/main.bc5faf9d.chunk.css

About webpack 2.0

Are you planning to update the repo to webpack 2.0? It would be interesting for hot reloading.

Failed to compile

./src/App.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-8-4!./src/App.less)
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? }

Ant Version Update

There's been a few fixes to Antd since 4.0.0..., more concretely one that throws errors to console when using the Space component. So after playing with it, I managed to get it working by changing the base file used for the less_hack. I don't seem to be able to push a new branch, so here's the fix:

Line 5, index.ts
hack_less: ``true:rue;@import "${require.resolve('antd/lib/style/themes/default.less')}";``,
(can't seem to escape literals properly here)

If you (like me) don't want to wait, or want to have it in a single file instead of a dependency for some reason, I managed to make it work all the same just by adding the transcribed file file (and insert its output to modifyVars):

var __assign = (this && this.__assign) || function () { __assign = Object.assign || function (t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var __importDefault = (this && this.__importDefault) || function (mod) { return mod && mod.__esModule ? mod : { default: mod }; }; Object.defineProperty(exports, '__esModule', { value: true }); /* eslint-disable @typescript-eslint/camelcase */ var dark_theme_1 = __importDefault(require('antd/dist/dark-theme')); exports.default = __assign( __assign( { hack_less: 'true:rue;@import "' + require.resolve('antd/lib/style/themes/default.less') + '";', //+ }, dark_theme_1.default ), { '@light': '#fff', '@tabs-horizontal-padding': '12px 0', // zIndex': 'notification > popover > tooltip '@zindex-notification': '1063', '@zindex-popover': '1061', '@zindex-tooltip': '1060', // width '@anchor-border-width': '1px', // margin '@form-item-margin-bottom': '24px', '@menu-item-vertical-margin': '0px', '@menu-item-boundary-margin': '0px', // size '@font-size-base': '14px', '@font-size-lg': '16px', '@screen-xl': '1208px', '@screen-lg': '1024px', '@screen-md': '768px', // 移动 '@screen-sm': '767.9px', // 超小屏 '@screen-xs': '375px', // 官网 '@site-text-color': '@text-color', '@site-border-color-split': 'fade(@light, 5)', '@site-heading-color': '@heading-color', '@site-header-box-shadow': '0 0.3px 0.9px rgba(0, 0, 0, 0.12), 0 1.6px 3.6px rgba(0, 0, 0, 0.12)', '@home-text-color': '@text-color', //自定义需要找设计师 '@gray-8': '@text-color', '@background-color-base': '#555', '@skeleton-color': 'rgba(0,0,0,0.8)', // pro '@pro-header-box-shadow': '@site-header-box-shadow', } );

Thanks!

Configuration after eject

Hi,

After "eject" I'm not able to run with: $ npm run start

This is the error:

[email protected] start /home/mafonso/projects/create-react-app-antd-master
react-app-rewired start

module.js:491
throw err;
^

Error: Cannot find module 'react-scripts/config/paths'

How to make it work after eject?

Thanks

Polyfills Best Practices

Hi all, it seems that there's no documentation on how to do polyfills with antd for create-react-app? I found some basic setup in the ant-design-pro src/index.js file but not sure which ones are absolute necessary. Thanks!

If I change the craco config file it will not reload the react app!

please, can someone help me with this, I've tried craco plugin for hot reload and no success there

Thank You.

This isn't an Issue. I just wanted to say thank you for creating this repo, which showed us how to use antd and the dynamic styles inside of an unejected Create React App.

We spent nearly an entire day trying to figure this out by ourselves and just couldn't get it to work.

I'll close this immediately but I just wanted to say thanks with more than a Start. 🙏

Is it better to put customize-cra react-app-rewired at devdependency ?

Is it better to use yarn add customize-cra react-app-rewired --dev,

seems like babel-plugin-import is not working

I have cloned this repo and ran "yarn start"

getting the bable-loader not found error.

and the antd is displaying an error in the console about the whole library being used
and styles are not getting applied.

I just included the main antd less file for now to continue working
but seems like the react-app-rewired is not able to find the 'babel-plugin-import'

let me know if am missing something

引入less, className={"header"}有效果， className={styles.header}没有效果

import styles from './home.less';

// 有效果
<h2 className={"header"}>Home</h2>

// 没有效果
<h2 className={styles.header}>Home</h2>

// home.less
.header {
padding: 0 12px;
color: #666666;
cursor: move;
}

yarn start 之后出现injectBabelPlugin is not a function

yarn run v1.12.3
$ react-app-rewired start
injectBabelPlugin is not a function
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.