Skip to content
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 · 25 comments
Closed

support babel-plugin-import #13

ucokfm opened this issue Feb 19, 2017 · 25 comments
Assignees

Comments

@ucokfm
Copy link

@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
Copy link

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

@eagerestwolf
Copy link

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

@eagerestwolf
Copy link

@eagerestwolf eagerestwolf 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
Copy link
Author

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

@eagerestwolf
Copy link

@eagerestwolf eagerestwolf commented Feb 22, 2017

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

@benjamn
Copy link
Member

@benjamn 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
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
Copy link
Member

@benjamn 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
Copy link

@matteosaporiti 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
Copy link

@lzl 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
Copy link

@zachguo 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
Copy link

@matteosaporiti 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
Copy link

@alesn 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
Copy link
Member

@benjamn 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
Copy link

@alesn 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
Copy link

@matteosaporiti 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
Copy link

@krizka krizka commented May 4, 2018

@benjamn Any updates on it? please reopen

@avalanche1

This comment was marked as off-topic.

@ostrebler
Copy link

@ostrebler ostrebler commented Aug 29, 2018

Same problem here. Any update ?

2 similar comments
@zhaoyao91
Copy link

@zhaoyao91 zhaoyao91 commented Nov 12, 2018

Same problem here. Any update ?

@ceednee
Copy link

@ceednee ceednee commented Jan 5, 2019

Same problem here. Any update ?

@obonyojimmy
Copy link

@obonyojimmy obonyojimmy commented Jun 25, 2019

same problem . Any update ?

@krizka
Copy link

@krizka krizka commented Jun 26, 2019

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
Copy link

@aliemdadi aliemdadi commented Dec 15, 2019

Same problem here. Any update ?

@eugle
Copy link

@eugle eugle commented Feb 15, 2021

@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 filipenevola assigned renanccastro and unassigned benjamn Mar 10, 2021
@filipenevola
Copy link
Member

@filipenevola filipenevola commented Mar 10, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet