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

react
52

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.

53

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.

1 Like
54

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?

1 Like
55

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:

  1. 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)
  2. 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.

1 Like
56

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.

57

anyone getting this error:

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

?

58

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) { ...
59

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.

2 Likes
60

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

61

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.

62

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.

63

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.

2 Likes
64

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.

65

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?

1 Like
66

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"
    ]
  }
}
67

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?

68

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...

69

And then I tried to add

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

But still don’t work

70

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

71

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';