There is always show errors when compiling but I have import from antd I don't know what is the problem.
These are the error show when compiling
Compiled with problems:
ERROR in ./src/components/excelPage.js 130:85-95
export 'Popconfirm' (imported as 'Popconfirm') was not found in 'antd' (module has no exports)
ERROR in ./src/components/excelPage.js 207:37-40
export 'Row' (imported as 'Row') was not found in 'antd' (module has no exports)
ERROR in ./src/components/excelPage.js 209:40-43
export 'Col' (imported as 'Col') was not found in 'antd' (module has no exports)
ERROR in ./src/components/excelPage.js 239:39-42
export 'Col' (imported as 'Col') was not found in 'antd' (module has no exports)
ERROR in ./src/components/excelPage.js 256:39-42
export 'Col' (imported as 'Col') was not found in 'antd' (module has no exports)
ERROR in ./src/components/excelPage.js 264:44-50
export 'Button' (imported as 'Button') was not found in 'antd' (module has no exports)
ERROR in ./src/components/excelPage.js 282:48-54
export 'Button' (imported as 'Button') was not found in 'antd' (module has no exports)
ERROR in ./src/components/excelPage.js 307:39-45
export 'Upload' (imported as 'Upload') was not found in 'antd' (module has no exports)
ERROR in ./src/components/excelPage.js 314:41-47
export 'Button' (imported as 'Button') was not found in 'antd' (module has no exports)
ERROR in ./src/components/excelPage.js 340:39-44
export 'Table' (imported as 'Table') was not found in 'antd' (module has no exports)
ERROR in ./src/utils/editable.js 31:31-42
export 'Form' (imported as 'Form') was not found in 'antd' (module has no exports)
ERROR in ./src/utils/editable.js 78:44-53
export 'Form' (imported as 'Form') was not found in 'antd' (module has no exports)
ERROR in ./src/utils/editable.js 88:33-38
export 'Input' (imported as 'Input') was not found in 'antd' (module has no exports)
This is my codeexcelPage.js
import React, { Component } from "react";import { Table, Button, Popconfirm, Row, Col, Upload } from "antd";import Icon from '@ant-design/icons';import { ExcelRenderer } from "react-excel-renderer";import { EditableFormRow, EditableCell } from "../utils/editable";export default class ExcelPage extends Component { constructor(props) { super(props); this.state = { cols: [], rows: [], errorMessage: null, columns: [ { title: "NAME", dataIndex: "name", editable: true }, { title: "AGE", dataIndex: "age", editable: true }, { title: "GENDER", dataIndex: "gender", editable: true }, { title: "Action", dataIndex: "action", render: (text, record) => this.state.rows.length >= 1 ? (<Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}><Icon type="delete" theme="filled" style={{ color: "red", fontSize: "20px" }} /></Popconfirm> ) : null } ] }; } handleSave = row => { const newData = [...this.state.rows]; const index = newData.findIndex(item => row.key === item.key); const item = newData[index]; newData.splice(index, 1, { ...item, ...row }); this.setState({ rows: newData }); }; checkFile(file) { let errorMessage = ""; if (!file || !file[0]) { return; } const isExcel = file[0].type === "application/vnd.ms-excel" || file[0].type ==="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; if (!isExcel) { errorMessage = "You can only upload Excel file!"; } console.log("file", file[0].type); const isLt2M = file[0].size / 1024 / 1024 < 2; if (!isLt2M) { errorMessage = "File must be smaller than 2MB!"; } console.log("errorMessage", errorMessage); return errorMessage; } fileHandler = fileList => { console.log("fileList", fileList); let fileObj = fileList; if (!fileObj) { this.setState({ errorMessage: "No file uploaded!" }); return false; } console.log("fileObj.type:", fileObj.type); if ( !( fileObj.type === "application/vnd.ms-excel" || fileObj.type ==="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ) ) { this.setState({ errorMessage: "Unknown file format. Only Excel files are uploaded!" }); return false; } //just pass the fileObj as parameter ExcelRenderer(fileObj, (err, resp) => { if (err) { console.log(err); } else { let newRows = []; resp.rows.slice(1).map((row, index) => { if (row && row !== "undefined") { newRows.push({ key: index, name: row[0], age: row[1], gender: row[2] }); } }); if (newRows.length === 0) { this.setState({ errorMessage: "No data found in file!" }); return false; } else { this.setState({ cols: resp.cols, rows: newRows, errorMessage: null }); } } }); return false; }; handleSubmit = async () => { console.log("submitting: ", this.state.rows); //submit to API //if successful, banigate and clear the data //this.setState({ rows: [] }) }; handleDelete = key => { const rows = [...this.state.rows]; this.setState({ rows: rows.filter(item => item.key !== key) }); }; handleAdd = () => { const { count, rows } = this.state; const newData = { key: count, name: "User's name", age: "22", gender: "Female" }; this.setState({ rows: [newData, ...rows], count: count + 1 }); }; render() { const components = { body: { row: EditableFormRow, cell: EditableCell } }; const columns = this.state.columns.map(col => { if (!col.editable) { return col; } return { ...col, onCell: record => ({ record, editable: col.editable, dataIndex: col.dataIndex, title: col.title, handleSave: this.handleSave }) }; }); return (<><h1>Importing Excel Component</h1><Row gutter={16}><Col span={8} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "5%" }}><div style={{ display: "flex", alignItems: "center" }}><div className="page-title">Upload Farmer Data</div></div></Col><Col span={8}><a href="https://res.cloudinary.com/bryta/raw/upload/v1562751445/Sample_Excel_Sheet_muxx6s.xlsx" target="_blank" rel="noopener noreferrer" download> Sample excel sheet</a></Col><Col span={8} align="right" style={{ display: "flex", justifyContent: "space-between" }}> {this.state.rows.length > 0 && (<><Button onClick={this.handleAdd} size="large" type="info" style={{ marginBottom: 16 }}><Icon type="plus" /> Add a row</Button>{" "}<Button onClick={this.handleSubmit} size="large" type="primary" style={{ marginBottom: 16, marginLeft: 10 }}> Submit Data</Button></> )}</Col></Row><div><Upload name="file" beforeUpload={this.fileHandler} onRemove={() => this.setState({ rows: [] })} multiple={false}><Button><Icon type="upload" /> Click to Upload Excel File</Button></Upload></div><div style={{ marginTop: 20 }}><Table components={components} rowClassName={() => "editable-row"} dataSource={this.state.rows} columns={columns} /></div></> ); }editable.js
import React from 'react'import {Form, Input} from 'antd'const EditableContext = React.createContext();const EditableRow = ({ form, index, ...props }) => (<EditableContext.Provider value={form}><tr {...props} /></EditableContext.Provider>);export const EditableFormRow = Form.create()(EditableRow);export class EditableCell extends React.Component { state = { editing: false, }; toggleEdit = () => { const editing = !this.state.editing; this.setState({ editing }, () => { if (editing) { this.input.focus(); } }); }; save = e => { const { record, handleSave } = this.props; this.form.validateFields((error, values) => { if (error && error[e.currentTarget.id]) { return; } this.toggleEdit(); handleSave({ ...record, ...values }); }); }; renderCell = form => { this.form = form; const { children, dataIndex, record, title } = this.props; const { editing } = this.state; return editing ? (<Form.Item style={{ margin: 0 }}> {form.getFieldDecorator(dataIndex, { rules: [ { required: true, message: `${title} is required.`, }, ], initialValue: record[dataIndex], })(<Input ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} />)}</Form.Item> ) : (<div className="editable-cell-value-wrap" style={{ paddingRight: 24, minHeight: 32 }} onClick={this.toggleEdit}> {children}</div> ); }; render() { const { editable, dataIndex, title, record, index, handleSave, children, ...restProps } = this.props; return (<td {...restProps}> {editable ? (<EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer> ) : ( children )}</td> ); }}