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

ucokfm · February 14, 2017, 12:02pm

Using latest Meteor (version 1.4.2.6) i can still get react component loaded, but not the styles. The current solution for style is import the whole less file.

modify .babelrc

{
  "plugins": [
    ["import", {"libraryName": "antd"}]
  ]
}

meteor add less

and then create theme.less file in client directory:

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

// Example overriding primary color
@primary-color: rgb(68, 68, 68);

UPDATE: it seems by downgrading ecmascript@0.6.3 to ecmascript@0.6.1 can fix this issue, i guess the new version of babel-compiler package can not read babel-plugin-import configuration correctly

ffxsam · February 14, 2017, 6:17pm

Maybe using Ant Design with Meteor is not such a great idea at the moment? It seems kind of hacky to get it working properly.

rlespagnol · February 15, 2017, 4:50pm

I use Ant Design for my project, and it’s awesome.
I never encoutered problem with the installation. I install it with the babelrc and it’s work like a charm.

All components are very good, and if not, developers are very happy to help you on github

So, for me it’s ready to use with Meteor. Add just one line in babelrc and it’s works. It’s not so complicated

@ffxsam you never succeed to use ant design on your app ?

rhywden · February 15, 2017, 10:35pm

No, it does not work.

theara · February 16, 2017, 2:39am

Have Tabular Alternative on Antd?

theara · February 16, 2017, 7:00am

I have the same problem.

rlespagnol · February 16, 2017, 10:21am

I have antd 2.7.1.

My babelrc :

{
  "presets": [
    "es2015",
    "stage-2",
    "react"
  ],
  "plugins": [
    "react-require",
    "babel-root-slash-import",
    ["import", { "libraryName": "antd", "style": "css" }]
  ]

}

And use antd like that :

import {Upload, Icon} from 'antd';

What is your problem with that ?

rhywden · February 16, 2017, 12:54pm

My problem is a) that I’m getting errors in the server console which have nothing to do with css (see above) and secondly, I’m leery of npm modules which require me to special-snowflake them in the babel configuration.

Either it’s working right off the bat or I’m not using it. I don’t like special snowflake modules.

theara · February 16, 2017, 1:22pm

@rlespagnol, could you show your package.json ?

rlespagnol · February 16, 2017, 1:34pm

Hmm I see that you don’t have indexof. I have, so maybe it’s beacause of that

"dependencies": {
    "Faker": "^0.7.2",
    "antd": "^2.7.1",
    "babel-runtime": "^6.20.0",
    "bcrypt": "^1.0.2",
    "classnames": "^2.2.5",
    "compress.js": "^1.0.8",
    "emojione": "^2.2.7",
    "fix-orientation": "0.0.2",
    "indexof": "0.0.1",
    "lodash": "^4.17.4",
    "mantra-core": "^1.7.0",
    "meteor-node-stubs": "^0.2.5",
    "moment": "^2.17.1",
    "prerender-node": "^2.7.0",
    "process": "^0.11.9",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-helmet": "^3.3.0",
    "react-infinite-scroller": "^1.0.4",
    "react-komposer": "^2.0.0",
    "react-mounter": "^1.2.0",
    "react-router": "^3.0.0",
    "react-simple-di": "^1.2.0",
    "react-timeago": "^3.1.3",
    "smartcrop": "^1.1.1",
    "string": "^3.3.3",
    "sweetalert-react": "^0.4.6"
  },
  "devDependencies": {
    "@kadira/storybook": "^2.5.2",
    "babel-core": "6.x.x",
    "babel-plugin-import": "^1.1.0",
    "babel-plugin-react-require": "2.x.x",
    "babel-polyfill": "6.x.x",
    "babel-preset-es2015": "6.x.x",
    "babel-preset-react": "6.x.x",
    "babel-preset-stage-2": "^6.18.0",
    "babel-preset-stage-3": "^6.17.0",
    "babel-root-slash-import": "1.x.x",
    "chai": "3.x.x",
    "enzyme": "^2.2.0",
    "eslint": "2.7.x",
    "eslint-plugin-react": "4.3.x",
    "jsdom": "^8.0.4",
    "mocha": "2.x.x",
    "react-addons-test-utils": "^15.0.0",
    "sinon": "1.17.x"
  }

theara · February 16, 2017, 2:12pm

My app

{
  "name": "ant-design",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "antd": "^2.7.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",
    "react": "^15.4.2",
    "react-addons-pure-render-mixin": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-flexbox-grid": "^0.10.2",
    "react-mounter": "^1.2.0",
    "simpl-schema": "^0.2.2",
    "uniforms": "^1.11.2",
    "uniforms-antd": "^1.11.2"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.1.0",
    "babel-plugin-transform-class-properties": "^6.23.0"
  }
}
---------
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd"
      }
    ],
    "transform-class-properties"
  ]
}

rhywden · February 16, 2017, 3:27pm

Right. Blindly install such a package without knowing what it does. Good job.

This is the exact kind of thinking which led to the “padleft” debacle where people were unable to code their way out of a wet paperbag without installing modules.

rlespagnol · February 16, 2017, 4:32pm

I prefer added indexof in my dependencies rather thant recode Ant Design…

Have you look about indexof ?

var indexOf = [].indexOf;

module.exports = function(arr, obj){
  if (indexOf) return arr.indexOf(obj);
  for (var i = 0; i < arr.length; ++i) {
    if (arr[i] === obj) return i;
  }
  return -1;
};

It’s just that…
So add this somes lines rather the powerfull lib… I made my choice.

rhywden · February 16, 2017, 4:34pm

Jesus Christ. Yes, exactly what I was expecting: Another version of “padleft”.

Naw, if they can’t code that without using an npm module then count me out. I really don’t want to know what the rest of their code looks like.

Not to mention that if their stuff depends on this module - then maybe they should include it in the frickin’ dependencies? Isn’t that the whole point of npm?

Matteo_Saporiti · February 17, 2017, 11:23am

That’s not how npm philosophy works.
They are (also) created to be small, reusable blocks.
It makes no sense for each package to include a lame workaround for indexof, forcing all the packages to be updated if a bug is discovered.

Then, getting back to the issue I think you all should write posts after a little bit of investigation on the issue because:

You can already see from the commandline screenshot that the indexof warning comes from component-classes node module folder and not from antd (so trashing antd is absurd)
component classes code does not need indexof and you can safely ignore the warning

try {
  var index = require('indexof');
} catch (err) {
  var index = require('component-indexof');
}

That is the relevant code, and it would have prevented several posts unrelated to the real problem.

Apart from that I can confirm there are some issues with babel-plugin-import since it doesn’t work as excepted.
Also tried with a base react meteor app, added antd, babel-plugin-import, configured antd plugin and it doesn’t work, all the antd module and there is no style.

I can create a github repo to reproduce the problem if someone wants to take a look.

ffxsam · February 18, 2017, 2:05am

I think the problem was missing a simple import of an antd CSS file.

import 'antd/dist/antd.css';

I haven’t tried that yet, but I was doing some paired programming with a client and they got it working, and that’s the only difference I could see between my Ant setup and theirs.

But there’s still a warning about using babel import whatever-it-is, even though it’s installed. Doesn’t seem to work with the Meteor build system.

achtan · February 18, 2017, 1:02pm

anyone getting this error:

/Users/admin/sites/real/node_modules/antd/lib/style/index.css:10
html {
     ^
Unexpected token {
...

?

rhywden · February 18, 2017, 3:50pm

Listen, this “npm way” is the exact reason why quite a number of sites were broken due to the “Padleft debacle”. You might want to take a look at that to discover why putting such stupid stuff into modules is a bad idea.

Not to mention that the author of “indexof” is doing polyfills wrong. It should look like this:

if (!Array.prototype.indexOf) Array.prototype.indexOf = function (searchElement, fromIndex) { ...

Matteo_Saporiti · February 18, 2017, 4:48pm

No it’s not, site were broken because npm implementation is (was? I think some improvements were made so that a similar case won’t happen again) a mess, not because padleft was a small building block.

Also the author is not doing polyfill because doing so would possibly break all the for in usage of arrays, since user-defined properties are enumerated.
Note that I will not continue this conversation so this is the last answer you will get from me, I’m here because I would really like to start using antd in some of my projects, pointless arguments about the pros and cons of npms are of no interest to me.

Getting back to antd

import 'antd/dist/antd.css';

Doesn’t seem a good idea since it includes the whole css.
The point of using babel-import-plugin is that it includes only the minimum required js and css, I don’t want to include the whole library and css.
For now I’m manually importing js and css like

import DatePicker from 'antd/lib/date-picker';
import 'antd/lib/date-picker/style/css';

which is not as nice as I’d like but still better than nothing, I guess.

achtan · February 18, 2017, 6:32pm

and what about less variables? are they working whit this approach?