Ant Design breaks on Meteor 1.4.4

help
1

When I go to localhost:3000 I get:

Uncaught ReferenceError: LocaleProvider is not defined
    at app.js:281
    at maybeReady (meteor.js:809)
    at HTMLDocument.loadingCompleted (meteor.js:821)

But this makes no sense because it worked fine before the update. The import is:

import { LocaleProvider } from 'antd';

Now here’s the really strange part. If I type require('antd') in the browser console, I get this:

Uncaught Error: Cannot find module 'antd'
    at require (modules-runtime.js?hash=2b888cb…:133)
    at <anonymous>:1:1

However, I revert to Meteor 1.4.3.2, then require('antd') and lo and behold:

I’m guessing some changes to the build system (which fixed yarn compatibility) might’ve broken something else?

2

@ffxsam Do you have a .babelrc file in your repo? If you do can you post it? I had the same error but for React.

3 
{
  "plugins": [
    "transform-decorators-legacy",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ],
    "babel-root-slash-import"
  ],
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ]
}
4

@ffxsam I was actually planning to open an issue for this and provide the steps for how I resolved it. The solution I used to get it to work is likely not ideal as I was unable to determine the exact change that caused the issue. My solution may not work for you, but I would be interested to hear your results.

Also out of curiosity what version of babel-preset-meteor are you using?

Starting on Meteor v1.4.3.2 before the upgrade we had the below file.
.babelrc

{
  "presets": ["meteor", "env", "react", "stage-2"],
  "plugins": ["transform-es2015-modules-commonjs"]
}

After updating to Meteor v1.4.4.1 the app would build/load but would report the below on client load.

Uncaught ReferenceError: React is not defined
    at index.js:13
    at maybeReady (meteor.js?hash=27829e9…:809)
    at HTMLDocument.loadingCompleted (meteor.js?hash=27829e9…:821)

The import that caused the ReferenceError was import React from 'react'; which was working fine on Meteor v1.4.3.2.

To debug I looked at the transpiled code, then cleaned my meteor cache to do a rebuild, next I also tried removing all node_modules and reinstalling the npm packages. This didn’t fix the issue. I suspected the issue was related to a change with babel and transpiling.

I was able to fix the issue for Meteor v1.4.4.1 with the below.

meteor npm install --save-dev babel-plugin-transform-es2015-modules-reify
Updating my .babelrc to use reify directly.

{
  "presets": ["meteor", "env", "react", "stage-2"],
  "plugins": ["transform-es2015-modules-reify"]
}

The above step broke our mocha tests we were using. To resolve that issue we installed reify directly as a dependency meteor npm install --save reify and passed reify as an option to mocha’s --compiler command.

Let me know if any of the above helps you!

Update: Forgot to mention to be on the safe side you should run meteor reset as I was experiencing some issues with the builds. I imagine some files were cached. It may also help to clean your node_modules and complete a fresh install if the above steps don’t help solve the issue for you.

5

Before it wasn’t really working since babel-plugin-import couldn’t work correctly due to how meteor-babel was working.
In that way you would have included all antd js/css.
1.4.4 should have fixed that but I also noticed it isn’t working correctly.


I already reported the bug there yesterday, let’s see if Ben can find the reason it’s not working as it should.

For now I’ve gone back to the manual import style so something like
import Button from 'antd/lib/button'; import 'antd/lib/button/style/css';

6

babel-plugin-import, don’t work for me too.
So I use

// client
@import {}/node_modules/antd/dist/antd.less'
----------
// use antd
import Button from 'antd/lib/button'
7

I don’t quite understand why Ant Design needs this babel-plugin-import at all. No other library I’ve used needs it. Is Ant Design’s package not structured properly?

8

Not using this, actually. I’ve gotten by just fine with the presets I have listed above.

9

Because antd provides a series of components and they don’t want you to get all the js and styles of all the components if you’re only using, for example, the button.
babel-plugin-import rewrites the imports so that you’re only importing the minimum amount of js and css/less.

10

Ahh, makes sense. I don’t know much about the internals of how packaging importing works.

11

Does anyone have a proper solution for this yet?