Question

我正在尝试定义一个样板项目，其中包括Webpack 4，Babel 7，React 16.7，Bootstrap 4.2和Reactstrap 7.1。

尽管在npm start之后呈现的页面按预期显示，但我在控制台中看到此错误：

popper.js:340 Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
    at popper.js:340
    at reactstrap.full.min.js:1
    at reactstrap.full.min.js:1

这是我的基本设置：

package.json

  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "acorn": "^6.0.5",
    "acorn-jsx": "^5.0.1",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "eslint": "^5.12.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.12.4",
    "react-hot-loader": "^4.6.3",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "autoprefixer": "^9.4.5",
    "bootstrap": "^4.2.1",
    "css-loader": "^2.1.0",
    "jquery": "^3.3.1",
    "postcss-loader": "^3.0.0",
    "precss": "^4.0.0",
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "reactstrap": "^7.1.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1"
  }

dist/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The Minimal React Webpack Babel Setup</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/7.1.0/reactstrap.full.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

src/index.js

/* eslint-disable */
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import { Jumbotron, Button } from 'reactstrap';

const title = 'My Minimal React Webpack Babel Setup';

const indexPage = (
  <Jumbotron>
    <h1>Hello, world!</h1>
    <p>
      This is a simple hero unit, a simple jumbotron-style component for calling
      extra attention to featured content or information.
    </p>
    <p>
      <Button>Learn more</Button>
    </p>
  </Jumbotron>
);

ReactDOM.render(
  indexPage,
  document.getElementById('app'),
);

module.hot.accept();

$ npm ls react-popper

minimal-react-boilerplate@1.0.0 /Users/francoisvanderhoven/learn/webpack/minimal-react-boilerplate
└─┬ reactstrap@7.1.0
  └── react-popper@0.10.4

任何人都可以与我分享我想合并的库的成功配置吗？

带react-popper 0.10.4的reactstrap 7.1会产生TypeError

0 个答案: