Question

正如antd描述的那样我正在使用babel-plugin-import并且我在webpack配置中添加了以下babel加载器。

webpack.config

{
  test: /\.js?$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
  query: {
   presets: ['react', 'es2015'],
   "plugins": [
     ["import", { libraryName: "antd", style: "css" }]
    ]
  }
}

MyApp.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button, Checkbox, Table, Icon, Badge, Alert, notification, Row, Col } from 'antd';
const { Column, ColumnGroup } = Table;

class MyApp extends Component {
   constructor(props) {
    super(props);
   }

   render() {
    let template = <Table dataSource={dataSource} columns={columns} />
    return (template);
   }
}
export default MyApp;

错误是

Uncaught Error: Element type is invalid: expected a string (for built-in components) 
or a class/function (for composite components) but got: object. 
Check the render method of `Table`.
    at invariant (invariant.js:44)
    at instantiateReactComponent (instantiateReactComponent.js:74)
    at instantiateChild (ReactChildReconciler.js:44)
    at ReactChildReconciler.js:71
    at traverseAllChildrenImpl (traverseAllChildren.js:77)
    at traverseAllChildrenImpl (traverseAllChildren.js:93)
    at traverseAllChildren (traverseAllChildren.js:172)
    at Object.instantiateChildren (ReactChildReconciler.js:70)
    at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:226)

的package.json

{
  "name": "myapp",
  "version": "1.0",
  "repository": "",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --colors",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --inline --historyApiFallback",
    "start": "npm run dev",
  },
  "dependencies": {
    "animate.css": "^3.5.2",
    "antd": "^2.10.2",
    "axios": "^0.15.3",
    "babel-core": "^6.14.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-angularjs-annotate": "^0.5.2",
    "babel-plugin-syntax-flow": "^6.13.0",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-es2017": "^6.16.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-1": "^6.16.0",
    "babel-runtime": "^6.11.6",
    "cidr-regex": "^1.0.6",
    "create-react-class": "^15.5.3",
    "d3": "^3.5.16",
    "debug": "2.2.0",
    "es6-promise": "^4.0.3",
    "express": "4.9.8",
    "file-saver": "^1.3.3",
    "filesaver.js": "^0.2.0",
    "fixed-data-table": "0.6.0",
    "font-awesome": "^4.7.0",
    "formsy-react": "0.17.0",
    "html2canvas": "^0.5.0-beta4",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "manifest-revision-webpack-plugin": "^0.3.0",
    "netmask": "^1.0.5",
    "node-waves": "^0.7.5",
    "normalize-css": "^2.3.1",
    "object-assign": "2.0.0",
    "prop-types": "~15.5.10",
    "react": "~15.5.4",
    "react-axios": "0.0.9",
    "react-custom-scrollbars": "^4.0.0",
    "react-dom": "~15.5.4",
    "react-google-maps": "4.7.2",
    "react-iframe": "0.0.4",
    "react-modal": "~0.6.1",
    "react-router": "^2.8.1",
    "react-router-dom": "^4.0.0",
    "react-tooltip": "^3.3.0",
    "reactable": "0.12.0",
    "rickshaw": "^1.6.0",
    "semver": "^5.3.0",
    "url": "^0.11.0",
    "webpack": "2.1.0-beta.25"
  },
  "devDependencies": {
    "assets-webpack-plugin": "^3.4.0",
    "autoprefixer": "^6.5.0",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-import": "^1.1.1",
    "babel-preset-env": "^1.2.2",
    "baggage-loader": "^0.2.4",
    "clean-webpack-plugin": "^0.1.10",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "eslint": ">=1.6.0 <4.0.0",
    "eslint-loader": "~1.5.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.22.0",
    "imagemin-pngquant": "^5.0.0",
    "jasmine": "^2.2.1",
    "jasmine-core": "^2.2.0",
    "json-loader": "^0.5.4",
    "karma": "^0.13.2",
    "karma-jasmine": "^0.3.5",
    "karma-phantomjs2-launcher": "^0.5.0",
    "karma-webpack": "^1.6.0",
    "node-sass": "^3.4.0",
    "node-static": "^0.7.9",
    "postcss-loader": "^0.13.0",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "2.1.0-beta.7"
  },
  "engines": {
    "node": ">=4.0.0"
  }
}

Answer 1

如果没有看到您的实际数据源和列变量声明，很难从错误代码中看出，似乎您没有以正确的格式向Table提供参数。

以下是数据源和列的示例。

const dataSource = [{
  key: '1',
  name: 'Mike',
  age: 32,
  address: '10 Downing Street'
}, {
  key: '2',
  name: 'John',
  age: 42,
  address: '10 Downing Street'
}];

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
}, {
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}];

另外，我不知道您的文件夹结构，但如果您的文件位于不同的文件夹中，那么您可能希望将这样的内容添加到您的webpack配置中。

include: path.join(__dirname, 'your_folder_name_goes_here')

antd module.exports = exports [＆＃39;默认＆＃39;];不管用

1 个答案: