通过TypeScript导入和Webpack2使用DatePicker

Question

I'm trying to test Ant Design components within a TypeScript + React + Webpack2 setup.

I'm importing the DatePicker component manually, so that webpack can grab it out and build it into my bundle.

import * as React from "react";
import * as moment from "moment";
import DatePicker from 'antd/lib/date-picker';
import "antd/lib/date-picker/style/css";

export default class TestComponent extends React.Component<any, any> {
    render(): JSX.Element {
        return <DatePicker value={moment(new Date())} format={"YYYY.mm.dd."}/>;
    }
}

But when I try to run the compiled code in the browser, the component won't render, as the particular import compiles into this final code.

Object.defineProperty(exports, "__esModule", { value: true });
var React = __webpack_require__(4);
var moment = __webpack_require__(0);
var date_picker_1 = __webpack_require__(287);
__webpack_require__(289);
var TestComponent = (function (_super) {
    __extends(TestComponent, _super);
    function TestComponent() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    TestComponent.prototype.render = function () {
        return React.createElement(date_picker_1.default, { value: moment(new Date()), format: "YYYY.mm.dd." });
    };
    return TestComponent;
}(React.Component));
exports.default = TestComponent;

Please note the date_picker_1.default reference, which is undefined , and causes the error.

Why is this happening? It shouldn't call default on the imported object, just use it, as it is the DateTimePicker component itself.

I have the following setup. TypeScript compiles into es5 using commonjs module system. This is done by the awesome-typescript-loader webpack loader. The rest should be done by webpack itself.

Answer 1

The DateTimePicker does have a default export (see lib/date-picker/index.js at the bottom), but when TypeScript compiles it to a commonjs module there is some sort of problem.

Webpack 2 handles ES modules out of the box, so you should leave the imports to webpack instead. Simply change the compiler option module to es6 .

"module": "es6"

You can change that without having to change your target, so it still outputs es5 but doesn't use commonjs modules. From the TypeScript - Compiler Options :

► "ES6" and "ES2015" values may be used when targeting "ES5" or lower.