And then I tried to add
@import '{}/node_modules/antd/dist/antd.less';
But still don’t work
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';
Can I see your .babelrc too? And are you doing a theme.less file? This setup will avoid loading the full antd library?
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';
@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.
1 Like
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.
Could try install less via meteor add less
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
1 Like
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)
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
Hi @enzolutions
As I said, AFAIK in Meteor 1.4.4.1 using antd with babel plugin import is still broken. Unless there is something you really need from Meteor version 1.4.4.1 for doing your development at the moment, I would recommend setting your project to use Meteor 1.4.2.6 (I think 1.4.2.7 is also still ok) - don’t use Meteor 1.4.4.1.
When you use Meteor 1.4.2.6, you can use antd the normal way that is described on antd’s website (there are clear instructions there but roughly: install antd and babel-plugin-import, add
["import", { "libraryName": "antd", "style": "css" }],
under “plugins” in your .babelrc file and in your source files include any components that you need with e.g.
import { Radio } from "antd";
That’s all you need and you don’t need to include css manually. It gets included
Is there anything new regarding the fix?
Still having the ‘You are using a whole package of antd…’ issue with meteor 1.6.1 ((
The only solution I’ve found is to use babel-plugin-import and import styles explicitly 
.babelrc:
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
],
"viewmodel-react-plugin",
"transform-class-properties"
]
app.js
import DatePicker from 'antd/lib/date-picker'
import 'antd/lib/date-picker/style/css'
1 Like
Btw, Antd is really huge!
When I import single DatePicker component my app grows in size for 400kb ungzipped!
Button component adds 150kb… and so on.
Hi All Dear,
I have failed to find the solution for changing the theme color from blue to green color please can any one help me ?
bundle of thanks in advance
Currently I created a variables.less file that is being imported after the antd.less file and defined @primary-1 -> @primary-10 variables and also the @primary-color: @primary-6 and everything works.
it is the second way suggested in the theming section of the library