support babel-plugin-import

[ucokfm]

When using meteor and antd (a react components framework), we need to use babel-plugin-import to convert this code:

import { Button } from 'antd';

into

var _button = require('antd/lib/button');

It was working with meteor-babel@0.13.0, but now it's not working (meteor-babel@0.14.4). I guess it because now meteor-babel will compile first using reifyCompiler and then pass the result to babel, while in v0.13.0 babel compile first and then pass the result to reify.

Is it possible to make reify not transpile specific module (like antd)? so babel will take the responsible to transpile it using babel-plugin-import?

[kvetoslavnovak]

I confirm this issue. Babel-plugin-import for antd https://github.com/ant-design/ant-design used to work ok but now seems broken in Meteor.

[eagerestwolf]

Ok, I have the repo source. Let me see what I can do. I am actually working on bringing babili support to Meteor, per meteor/meteor#8379. I think meteor-babel is setup to honor your babelrc file. If not, while I am working on the Meteor core, I can see if they will let me expose a configuration object from the babel-compiler package to allow users to use their own plugins.

[eagerestwolf]

So, an update on this, if MDG thinks it's a good idea, I could possibly add support via features for Babel plugin imports. Honoring babelrc is not an option though, because that breaks the whole package.

[ucokfm]

In the latest meteor-babel index.js, i find that actually reifyCompiler is utilizing babel parser with strict limited plugins: plugins: ["*", "jsx", "flow"]. I'm curious if there is an elegant way to optionally inject additional plugins into that list, so reifyCompiler can also use babel-plugin-import.

[eagerestwolf]

I'm not 100% sure honestly, this is my first experience with reify.

[benjamn]

Sorry for the long wait, and for not having a great answer yet. I've been working on this problem lately by attempting to turn the Reify compiler into a Babel plugin. If that works, then it should be easier for custom Babel plugins to run before (or after) the Reify compiler, since it will no longer be a magical thing that happens independently.

[benjamn]

If you run meteor update --release 1.4.3.3-beta.3 in your application directory, this problem should be fixed. Specifically, now that the Reify compiler is a Babel plugin, putting babel-plugin-import in your .babelrc file should cause that plugin to run before Reify has the chance to compile import declarations. Please feel free to reopen this issue if it doesn't work for you!

[matteosaporiti]

Hi @benjamn
Tried using babel-plugin-import and antd with meteor 1.4,4.1 but I cannot make it work.
I created a simple repo so that you can reproduce the problem (it's just the todo app with an antd Spin added)
https://github.com/matteosaporiti/babel-plugin-import-test
It seems like it doesn't resolve the Spin.

[lzl]

I can confirm Meteor 1.4.3.2 works with babel-plugin-import. But Meteor 1.4.4.1 doesn't. @matteosaporiti has reproduction repo above. Someone reopen this issue please.

[zachguo]

@ucokfm @benjamn please reopen this issue per #13 (comment) and #13 (comment). I can confirm that v1.4.4.2 doesn't work either.

[matteosaporiti]

Update: still broken in 1.4.4.3 and 1.5.
My guess is that unless an issue is opened in Meteor issues tracker and gains traction there it won't get much priority.

[alesn]

@benjamn
This has been a blocking bug of the later versions of Meteor since 1.4.3.2. However much work you put into creating new versions of Meteor, we can't use them because of this blocking bug. Please, reopen this issue

[benjamn]

I appreciate your frustration, I really do, but I'm honestly not sure when we're going to have time to improve compatibility with babel-plugin-import, since it relies so heavily on quirks of the Babel plugin system, and in particular assumes that other plugins run later without doing anything to ensure that they run.

In the meantime, I would strongly encourage you to ask yourselves if writing

import Button from "antd/lib/button";

is really more trouble than writing

import { Button } from 'antd';

considering that the second version relies on special plugin magic to work. You can (and I think should) go ahead and start making changes like that, and then you won't be dependent on babel-plugin-import anymore.

[alesn]

@benjamn Thank you for your response. I understand resolving this issue would have low priority if it was just about preference of import format. The problem however is not about writing the import one or the other way. If it was just about this, the second one is just a little bit more comfortable. The reason to use babel-plugin-import is because it imports just the css required by components actually used in your project, instead of bundling the whole antd css file, which is rather large to send down the lines to clients

[matteosaporiti]

@benjamn Thanks for taking the time to explain the quirks of babel-plugin-import.
@alesn You can can import just the css/less that you need

import DatePicker from 'antd/lib/date-picker';  // for js
import 'antd/lib/date-picker/style/css';        // for css
// import 'antd/lib/date-picker/style';         // that will import less

And that is what I'm using in production with no problem.
It would be awesome if meteor would support the plugin magic (one shorter line vs two) but it's not a showstopper by any means.

[krizka]

@benjamn Any updates on it? please reopen

[ostrebler]

Same problem here. Any update ?

[zhaoyao91]

Same problem here. Any update ?

[ceednee]

Same problem here. Any update ?

[obonyojimmy]

same problem . Any update ?

[krizka]

After long tries, I moved client-side meteor code to meteor-client-bundler + webpack and very happy with it: server not restarted with client code update, client code updates become extremely fast, and server restarted in about 4 seconds without client-side code. What I lost is SSR, but I don't need it much.

[aliemdadi]

Same problem here. Any update ?

[eugle]

@matteosaporiti Now in 2021, is babel-plugin-import not available in meteor? Is this a problem that can't be solved and can only be used like this

import DatePicker from 'antd/lib/date-picker';  // for js
import 'antd/lib/date-picker/style/css';        // for css
// import 'antd/lib/date-picker/style';         // that will import less

[filipenevola]

Our plan is to solve this issue with Tree-shaking PR.

So you could import the lib from the root but tree-shaking would prevent your bundle to have everything.