How to get antd working with app created via creat

问题:

I'm new to react and antd.

I started a new react project using create-react-app. I installed antd (ant.design).

I tried out the DatePicker by adding an import and adding it to my render, modifying App.js as follows:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { DatePicker } from 'antd';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <DatePicker/>
      </div>
    );
  }
}

export default App;

In Chrome it seems to work, although the styling is weird. In IE11 it doesn't load because of a startsWith function call (startsWith not supported in IE11). However, the DatePicker demo at the ant.design website works in IE11.

It seems I'm missing some polyfills / old browser support somehow. If I try to do a production build and serve that, it also has the same error.

What needs done to get antd working for browsers such as IE11 with an app created via create-react-app?

回答1:

Create-react-app doesn't include polyfills.

I worked around this by installing core-js and importing the es6 module I wanted in the src/index.js file:

import 'core-js/es6';

You can also import only the specific module you want:

import 'core-js/es6/function';

I recommend the first, since you'll most likely end up using more functions throughout your app.