New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support babel-plugin-import #13

Closed
ucokfm opened this Issue Feb 19, 2017 · 19 comments

Comments

Projects
None yet
@ucokfm

ucokfm commented Feb 19, 2017

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

This comment has been minimized.

kvetoslavnovak commented Feb 19, 2017

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.

@sethmurphy18

This comment has been minimized.

sethmurphy18 commented Feb 20, 2017

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.

@sethmurphy18

This comment has been minimized.

sethmurphy18 commented Feb 22, 2017

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

This comment has been minimized.

ucokfm commented Feb 22, 2017

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.

@sethmurphy18

This comment has been minimized.

sethmurphy18 commented Feb 22, 2017

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

@benjamn

This comment has been minimized.

Member

benjamn commented Mar 14, 2017

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 added a commit to meteor/meteor that referenced this issue Mar 14, 2017

Update meteor-babel to version 0.17.2.
The most important change in this version is that the Reify compiler is
now just another Babel plugin, so it's possible for other Babel presets
and plugins to run before it.

Fixes #8399.
Fixes #8422.
Fixes meteor/babel#13.
@benjamn

This comment has been minimized.

Member

benjamn commented Mar 17, 2017

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!

@benjamn benjamn closed this Mar 17, 2017

@benjamn benjamn self-assigned this Mar 17, 2017

@matteosaporiti

This comment has been minimized.

matteosaporiti commented Apr 13, 2017

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

This comment has been minimized.

lzl commented May 2, 2017

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

This comment has been minimized.

zachguo commented May 11, 2017

@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

This comment has been minimized.

matteosaporiti commented May 31, 2017

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

This comment has been minimized.

alesn commented May 31, 2017

@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

This comment has been minimized.

Member

benjamn commented May 31, 2017

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

This comment has been minimized.

alesn commented May 31, 2017

@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

This comment has been minimized.

matteosaporiti commented May 31, 2017

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

zaklampert added a commit to zaklampert/merightmeow that referenced this issue Aug 16, 2017

@krizka

This comment has been minimized.

krizka commented May 4, 2018

@benjamn Any updates on it? please reopen

@avalanche1

This comment was marked as off-topic.

avalanche1 commented May 6, 2018

please reopen

Unlikely

@ostrebler

This comment has been minimized.

ostrebler commented Aug 29, 2018

Same problem here. Any update ?

1 similar comment
@zhaoyao91

This comment has been minimized.

zhaoyao91 commented Nov 12, 2018

Same problem here. Any update ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment