React-picky:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:未定义

Par*_*eep 5 typescript reactjs

我正在使用react-picky包来显示带有typescript的选择过滤器选项,您可以检查以下package.json的版本。当我在没有打字稿的情况下使用 create-react-app 时,一切正常。也许某些库发生了冲突。我尝试过更新react和react-dom,即使它显示与我所附图像相同的错误。这不是一个进出口问题。我已经尝试了所有导入导出的方法。

这是控制台快照 包.json

 {
  "name": "user-portal-client",
  "version": "1.0.0",
  "description": "Front-end code for the Coinstash user portal.",
  "scripts": {
    "start": "webpack-dev-server --open",
    "start:headless": "webpack-dev-server --host 0.0.0.0 --port 5000 --watch-poll",
    "build": "webpack --config webpack.config.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@types/axios": "^0.14.0",
    "@types/classnames": "^2.2.7",
    "@types/history": "^4.7.0",
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "@types/react-modal": "^3.8.1",
    "@types/react-places-autocomplete": "^7.2.3",
    "@types/react-router-dom": "^4.3.1",
    "@types/react-share": "^2.1.1",
    "@types/react-sidebar": "^3.0.0",
    "@types/socket.io-client": "^1.4.32",
    "@types/styled-components": "4.1.8",
    "@types/url-join": "^4.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "copy-webpack-plugin": "^4.4.2",
    "source-map-loader": "^0.2.4",
    "styled-components": "^4.2.0",
    "ts-node": "^7.0.1",
    "typescript": "^3.5.2",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "@blueprintjs/core": "^3.10.0",
    "@blueprintjs/datetime": "^3.6.0",
    "@blueprintjs/select": "^3.5.0",
    "@types/body-scroll-lock": "^2.6.1",
    "@types/reactour": "^1.13.1",
    "antd": "^3.16.3",
    "apexcharts": "^3.6.8",
    "axios": "^0.19.0",
    "body-scroll-lock": "^2.6.4",
    "classnames": "^2.2.6",
    "decimal.js": "^10.1.1",
    "mobile-detect": "^1.4.3",
    "moment": "^2.22.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-google-contacts": "0.0.1",
    "react-media": "^1.9.2",
    "react-modal": "^3.8.1",
    "react-picky": "^4.5.2",
    "react-places-autocomplete": "^7.2.0",
    "react-router-dom": "^4.3.1",
    "react-share": "^3.0.0",
    "react-sidebar": "^3.0.2",
    "reactour": "^1.15.0",
    "recordrtc": "^5.5.2",
    "socket.io-client": "^2.2.0",
    "url-join": "^4.0.0"
  }
}
Run Code Online (Sandbox Code Playgroud)

应用程序.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as Modal from "react-modal";
import Picky from "react-picky";

declare const document: HTMLDocument;
Modal.setAppElement("#root");

const App = () => (
  <div>
    <Picky
      id="picky"
      options={[1, 2, 3, 4, 5]}
      value={[]}
      multiple={true}
      includeSelectAll={true}
      includeFilter={true}
      onChange={values => console.log(values)}
      dropdownHeight={600}
    />
    ;
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));

declare let module: any;

if (module.hot) {
  module.hot.accept();
}
Run Code Online (Sandbox Code Playgroud)