Antd 2.0 released in English - the best React components library 👍

tab00 · February 19, 2017, 10:57am

I’ve been thinking of trying antd but is it really ready for a production environment?

I’ve been using bootstrap, which everyone would agree is now quite mature, however react-bootstrap has still not yet reached 1.0.0. How does antd compare in maturity to react-bootstrap?

I’ve had a look in particular at antd’s carousel component and it doesn’t seem to have any left and right controls, which makes me feel more reluctant to try it.

ucokfm · February 19, 2017, 12:58pm

I create an issue on meteor-babel repo related this babel-plugin-import error:
https://github.com/meteor/babel/issues/13

I found that if you use meteor --production to run the code, the import error message is gone.
It seems reify module is needed by meteor to support import syntax in meteor shell (repl), but not used to compile production bundle.

a.com · February 19, 2017, 2:26pm

This is the one component I had some trouble with. Otherwise I’m loving not having to cobble together a bunch of third-party packages. react-boostrap forces you to npm for half your app… praying that XYZ component will work with the existing app, hoping it wont turn to abandoneware, etc.

Antd gives you 80% of what you need for most apps and you know they’ll all play relatively nicely together. I don’t think I’ll ever go back to react-bootstrap. The only downside is searching issues can kind of suck with google translate.

rlespagnol · February 20, 2017, 12:56pm

I see the problem with a fresh install of meteor.
Thanks to @ucokfm, I see that the ecmascript package is the problem (@0.6.3).

Downgrade the package to @0.6.1 fix the problem and antd works.

I posted an issue on the babel-plugin-import repo : https://github.com/ant-design/babel-plugin-import/issues/117

But I don’t know if it’s a problem with the meteor package or with the babel plugin.

a.com · March 1, 2017, 12:18pm

I found this but it looks out of date:

https://www.npmjs.com/package/babel-plugin-antd-meteor

Is there anyway to test/confirm that you truly aren’t downloading the entire antd library and only using the needed ones?

orcprogramming · March 1, 2017, 12:39pm

Hi guys,

I’m trying to use CSS Modules (nathantreid:css-modules 2.4.0) along side ant-design. When trying to run the app it gets stuck at ‘Processing fields with nathantried:css…’ Any thoughts?

Here is my package.json

{
  "name": "fulbacho",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "lint": "eslint .",
    "pretest": "npm run lint --silent"
  },
  "dependencies": {
    "antd": "^2.6.0",
    "babel-runtime": "^6.20.0",
    "bcrypt": "^0.8.7",
    "classnames": "^2.2.5",
    "immutability-helper": "^2.0.0",
    "less": "^2.7.2",
    "meteor-node-stubs": "^0.2.3",
    "moment": "^2.17.0",
    "normalize.css": "^4.1.1",
    "react": "^15.3.2",
    "react-addons-css-transition-group": "^15.3.2",
    "react-addons-pure-render-mixin": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-mounter": "^1.2.0",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.1",
    "react-spinjs": "^3.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "react-toolbox": "^1.3.4",
    "react-waypoint": "^4.1.0",
    "redux": "^3.6.0",
    "redux-logger": "^2.7.4",
    "redux-thunk": "^2.2.0",
    "underscore": "^1.8.3"
  },
  "eslintConfig": {
    "plugins": [
      "meteor"
    ],
    "extends": [
      "airbnb",
      "plugin:meteor/recommended"
    ],
    "rules": {
      "max-len": 0,
      "import/no-unresolved": 0,
      "no-underscore-dangle": [
        "error",
        {
          "allow": [
            "_id",
            "_ensureIndex",
            "_verifyEmailToken",
            "_resetPasswordToken",
            "_name"
          ]
        }
      ]
    }
  },
  "devDependencies": {
    "autoprefixer": "^6.3.5",
    "babel-eslint": "^7.0.0",
    "babel-plugin-import": "^1.1.0",
    "babel-preset-stage-1": "^6.16.0",
    "deep-freeze": "0.0.1",
    "eslint": "^2.10.2",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.8.0",
    "eslint-plugin-jsx-a11y": "^1.2.0",
    "eslint-plugin-meteor": "^3.5.2",
    "eslint-plugin-react": "^5.1.1",
    "expect": "^1.20.2",
    "node-sass": "^3.4.2",
    "postcss-reporter": "^1.3.3",
    "redux-devtools": "^3.3.2",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.2.0",
    "stylelint": "^5.2.1"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "stylelint": {
        "rules": {
          "selector-class-pattern": "[a-z]+"
        }
      },
      "postcss-reporter": {
        "clearMessages": true
      }
    }
  },
  "cssModules": {
    "extensions": [
      "scss",
      "less",
      "css"
    ],
    "enableSassCompilation": ["scss"],
    "enableLessCompilation": ["less"],
    "passthroughPaths": [
      "node_modules/antd"
    ],
    "globalVariables": [],
    "ignorePaths": [
      "node_modules/node-sass/test",
      "node_modules/doiuse/test",
      "node_modules/css-tokenize/test",
      "node_modules/convert-source-map/test",
      "node_modules/less/test"
    ]
  }
}

tathagatbanerjee · March 2, 2017, 4:39am

I copied over the css file into my spreadsheets folder and this seemed to work fine. Not sure if this is a good idea, but copiying over the minified version would solve this problem would it not?

theara · March 3, 2017, 8:05am

After update to

METEOR@1.4.3.1
---
{
  "name": "ant-design",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "antd": "^2.7.4",
    "babel-plugin-import": "^1.1.1",
    "babel-runtime": "^6.23.0",
    "classnames": "^2.2.5",
    "flexboxgrid": "^6.3.1",
    "graphql": "^0.9.1",
    "indexof": "0.0.1",
    "jquery": "^3.1.1",
    "jquery-validation": "^1.16.0",
    "meteor-node-stubs": "~0.2.3",
    "moment": "^2.17.1",
    "react": "^15.4.2",
    "react-addons-pure-render-mixin": "^15.4.2",
    "react-dimensions": "^1.3.0",
    "react-dom": "^15.4.2",
    "react-flexbox-grid": "^0.10.2",
    "react-mounter": "^1.2.0",
    "react-sizeme": "^2.2.0",
    "simpl-schema": "^0.2.2",
    "uniforms": "^1.13.1",
    "uniforms-antd": "^1.13.1"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.1.0",
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-polyfill": "^6.23.0"
  }
}
----
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ],
    "transform-class-properties"
  ]
}

Get error You are using a whole package of antd, please use...

theara · March 3, 2017, 8:44am

And then I tried to add

@import '{}/node_modules/antd/dist/antd.less';

But still don’t work

rlespagnol · March 3, 2017, 10:55am

https://github.com/meteor/meteor/issues/8399 and no update

theara · March 3, 2017, 11:06am

Now it work fine, if I import all of component form ant/lib...

// .babelrc
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd"
      }
    ],
    "transform-class-properties"
  ]
}
-------------------
// in client folder (theme.less)
@import '{}/node_modules/antd/dist/antd.less';

And then

import React from 'react';
import LocaleProvider from 'antd/lib/locale-provider';
import enUS from 'antd/lib/locale-provider/en_US';

import Layout from 'antd/lib/layout';
const {Header, Sider, Content, Footer} = Layout;

import Menu from 'antd/lib/menu';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

import Icon from 'antd/lib/icon';
import Breadcrumb from 'antd/lib/breadcrumb';

import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import Dropdown from 'antd/lib/dropdown';

mrmsupport · March 3, 2017, 11:08am

Have a look at the issue on uniforms-antd https://github.com/vazco/uniforms/issues/219

a.com · March 26, 2017, 2:07pm

Can I see your .babelrc too? And are you doing a theme.less file? This setup will avoid loading the full antd library?

achtan · March 26, 2017, 3:33pm

hi, i have error with Upload component

modules-runtime.js?hash=be9fc65…:133 Uncaught Error: Cannot find module '../progress'
    at require (modules-runtime.js?hash=be9fc65…:133)
    at meteorInstall.node_modules.antd.lib.Upload.uploadList.js (modules.js?hash=bfc9cd2…:195306)
    at fileEvaluate (modules-runtime.js?hash=be9fc65…:207)
    at require (modules-runtime.js?hash=be9fc65…:130)
    at meteorInstall.node_modules.antd.lib.Upload.index.js (modules.js?hash=bfc9cd2…:194919)
    at fileEvaluate (modules-runtime.js?hash=be9fc65…:207)
    at Module.require (modules-runtime.js?hash=be9fc65…:130)
    at Module.Mp.import (modules.js?hash=bfc9cd2…:355)
    at meteorInstall.imports.estateEditor.components.StepGallery.jsx (StepGallery.jsx:1)
    at fileEvaluate (modules-runtime.js?hash=be9fc65…:207)

anyone know how to fix this? thx

EDIT: error occurs when i import Progress and Upload in the same file

import Progress from 'antd/lib/Progress'; // if i remove this line --> no error
import Upload from 'antd/lib/Upload';

mrmsupport · March 27, 2017, 4:19pm

@achtan I think the error is due to the wrong upper-case in import string, try:

import Progress from 'antd/lib/progress'; 
import Upload from 'antd/lib/upload';

Have not looked at the export definitions in antd but all work with lower-case export in my experience.

enzolutions · April 14, 2017, 12:00am

Hi folks

it looks like some of your have antd running in meteor, after several tries finally I could create a project with antd running.

I create a demo sample at GitHub - enzolutions/react-antd-meteor-demo

But If you see the following image you would notice that the form is running the css/less weren’t compiled or included.

Could you give any recommendation about how to do that?

Outside meteor I did that using webpack but looks like meteor works in a different way.

Also, I am confused because in some replies I saw people use the babelrc file, but in all combinations, I tried always fail.

I am using “antd”: “^2.9.1”,

Thanks in advance for your recommendations.

theara · April 14, 2017, 12:55am

Could try install less via meteor add less

enzolutions · April 14, 2017, 1:44am

Hi @theara

Thanks for your help, that was exactly what I did and in added a new file in client/theme.less to import the antd less files

@import '{}/node_modules/antd/dist/antd.less';

Thanks for your help anyway.

I am loving meteor

Kind regards

raycone · April 14, 2017, 1:34pm

antd works correctly in Meteor 1.4.2.6 without any “hacks” needed (import { Radio } from “antd”; works correctly including the css required when using babel-plugin-import as it should). A later version of Meteor broke this. A related issue (https://github.com/meteor/meteor/issues/8399) has been closed but when I checked Meteor 1.4.4.1, it was still broken (and I guess more people that have been using antd are postponing upgrade of Meteor version to the later ones because of this problem)

enzolutions · April 14, 2017, 9:52pm

Hi @raycone

Thanks for your reply, I am using Meteor 1.4.4.1 and Antd 2.9.1

After installing babel-plugin-import 1.1.1 and remove the theme.less file with the instruction

@import '{}/node_modules/antd/dist/antd.less';

The CSS files weren’t loaded, could you give more information about how to use the babel plugin import to avoid to have ti import the less file manually.

Kind regards