ant-design: TypeError: (0 , _moment2.default) is not a function

I’m trying to use antd as a component library with my existing build system (webpack 2). Can I use components from this library without importing the entire build system? I did

npm install antd

and in my page, added

import { DatePicker } from 'antd'

export function Page(){
  return <DatePicker/>
}

Error

Uncaught TypeError: (0 , _moment2.default) is not a function
    at Function.getDefaultProps (?d41d*:78)
    at Object.createClass (ReactClass.js:675)
    at Object../node_modules/rc-time-picker/lib/Panel.js (?d41d*:45)
    at __webpack_require__ (bootstrap d2f4533…:689)
    at fn (bootstrap d2f4533…:110)
    at Object../node_modules/antd/lib/date-picker/wrapPicker.js (wrapPicker.js:21)
    at __webpack_require__ (bootstrap d2f4533…:689)
    at fn (bootstrap d2f4533…:110)
    at Object../node_modules/antd/lib/date-picker/index.js (index.js:23)
    at __webpack_require__ (bootstrap d2f4533…:689)

Environment

webpack 2 Antd 2.4.3 Node 7 OSX 10.10

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 3
Comments: 25 (9 by maintainers)

Commits related to this issue

Fix moment locale error when importing antd ref ant-design/ant-design#3947 & ant-design/ant-design#4491 — committed to afc163/react-boilerplate by afc163 7 years ago
Fix moment locale error when importing antd ref ant-design/ant-design#3947 & ant-design/ant-design#4491 — committed to afc163/react-boilerplate by afc163 7 years ago
Fix moment locale error when importing antd working with webpack2 ref ant-design/ant-design#3947 & ant-design/ant-design#4491 — committed to afc163/react-boilerplate by afc163 7 years ago

Most upvoted comments

Try this: https://github.com/webpack/webpack/issues/1694#issuecomment-164481066

afc163 on Nov 22, 2016

@KhushbooTaneja This alias has to be added in the webpack configuration. details.

  resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '',
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'jsnext:main',
      'main',
    ],
    alias: {
      // required for moment to work properly
      moment: 'moment/moment.js',
    }
  },

deveedutta on Dec 29, 2016

The only way i could work around this was by adding an alias

alias: {
   moment: 'moment/moment.js'
}

But by adding this the bundle size is bloated since it includes many other language locales.

pastelsky on Dec 1, 2016

I’m having this exact same issue. I don’t think it’s related to babel, but I do believe it’s a problem with moment lib. It seems to me that moment is not webpack friendly, as I already had some issues with it in the past and it keeps occurring.

Probably related:

MateusDantas on Nov 26, 2016

@18601673727

- import { RangePicker } from 'antd';
+ import { DatePicker } from 'antd';
+ const RangePicker = DatePicker.RangePicker;

afc163 on Jan 9, 2017

Found a workaround for using antd in react-boilerplate: https://github.com/ant-design/ant-design/issues/4491#issuecomment-270887624

alias: {
- moment: 'moment/moment.js',
+ moment$: 'moment/moment.js',
},

afc163 on Jan 7, 2017

Ok now when I try to change locale like this: import enUS from 'antd/lib/locale-provider/en_US';

I get the following error:

Dynamic page loading failed TypeError: _moment2.default.locale is not a function at eval (eval at <anonymous> (http://localhost:3000/7.chunk.js:3201:1), <anonymous>:29:21) at Object.<anonymous> (http://localhost:3000/7.chunk.js:3201:1) at webpack_require (http://localhost:3000/main.js:620:30) at fn (http://localhost:3000/main.js:103:20) at Object.eval (eval at <anonymous> (http://localhost:3000/7.chunk.js:2621:1), <anonymous>:22:89) at eval (eval at <anonymous> (http://localhost:3000/7.chunk.js:2621:1), <anonymous>:246:30) at Object.<anonymous> (http://localhost:3000/7.chunk.js:2621:1) at webpack_require (http://localhost:3000/main.js:620:30) at fn (http://localhost:3000/main.js:103:20) at eval (eval at <anonymous> (http://localhost:3000/7.chunk.js:6:1), <anonymous>:1:69)

anton6 on Nov 30, 2016

In my case, I managed to to get it working by installing moment with specific version: “moment”: “2.15.2”. Later version of moment seems to cause the above problem for me.

@MateusDantas this is exactly why we recently switched to date-fns

anton6 on Nov 30, 2016