import { Component } from 'antd' does not work.

[eminx]

The plugin imports don't seem to work.

In my code: import { Layout } from 'antd';

It gives the error: ReferenceError: Layout is not defined.

When I change my code to: const Layout = require('antd').Layout;

it works.

Can someone please help me fix that? This started out of nothing...

[eminx]

No one out there? :(

[yesmeck]

Reproduce repo.

[eminx]

https://github.com/eminx/Nodal

See the importing of antd components are with /lib at the end. This was the fix I could do. Like this:

import { Button } from 'antd/lib';

If you want to reproduce, just remove the /lib and you'll see...

Thanks!

[eminx]

For example in this file: https://github.com/eminx/Nodal/blob/master/client/UIComponents/CardArticle.jsx

[lefter]

update your react and react-dom 16 +

[ghost]

react and react-dom are all 16.2.0. But I also have the same Reference Error of any Component I tried to use.

Probably Meteor and babel-plugin-import is not compatible for some reason. As I see @eminx is using Meteor framework also.

[eminx]

Exactly. @gchansc Do you also use meteor? In that case it must be related to it. The weird thing is everything was working fine in the beginning. This all happened at some ambiguous point. Fortunately I found the work around with /lib at the end though...

[ghost]

@eminx Yes. I'm testing Meteor with antd. Then I ran into this issue. Seems the current workaround is to add /lib when import.

Happy coding! ^^

[cloudever]

It's clear that problem with meteor builder. Try to build client code separetely on your host and give us feedback.

[eminx]

Since this is an issue that has to do with Meteor, and not antd, I'm closing it.

[eminx]

Hello!

After almost three years I'm reopening the same issue :)

Basically I get why we need to do the /lib hack: Because we have the .babelrc file defined with this configuration for treeshaking:

{
  "presets": ["meteor"],
  "plugins": [
    ["import", { "libraryName": "antd", "style": true }, "antd"],
    [
      "import",
      {
        "libraryName": "@ant-design/icons",
        "libraryDirectory": "lib/icons",
        "camel2DashComponentName": false
      },
      "@ant-design/icons"
    ]
  ]
}

But unfortunately the treeshaking itself is not working. Because well, I'm using only a few icons and it seems like they are over 1mb in the bundle!

How to make this tree-shaking work on Meteor so the bundle is for humans?

[designervoid]

with vite and vue3 (with typescript) working import like that:

import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
// components
app.use(Antd);

// mount
app.mount('#app');

with webpack and vue3 (with typescript) working import like that:

import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue/lib";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
// components
app.use(Antd);

// mount
app.mount('#app');

UPD: Need to configure babel-plugin-import and you can use only “ant-design-vue” path.