无法使用 babel 和 react-bootstrap 与 Laravel 反应

Question

我正在使用 React 和 Laravel 开发一个 Web 应用程序。我希望两者都在同一个项目中。所以在 Laravel 应用程序中，我安装了 react using preset (php artisan preset react) 跟随这个链接，https://appdividend.com/2017/08/31/laravel-5-5-reactjs-tutorial/。我的设置工作正常。在某些时候，我安装了 react bootstrap 并运行了这个命令。

npm install react-bootstrap --save

然后我在我的项目中使用了这样的引导按钮组件。

import React, {Component} from 'react';
import Button from 'react-bootstrap/lib/Button';

class CreateItem extends Component {

    render() {
      return (
      <div>
        <h1>Create An Item</h1>
        <form>
          <Button>Submit</Button>
        </form>
  </div>
      )
    }
}
export default CreateItem;

它仍然工作正常。然后，我像这样在我的组件中使用了 es6 语法。

class CreateItem extends Component {

  addItem = () => {

  }
  //other code
}
export default CreateItem;

当我运行它时抛出错误，因为我使用了 es6 语法。因此，为了解决错误，我安装了运行以下命令所需的 babel 包。

npm install --save babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

当我运行“npm run watch”时，它会抛出这个错误。

ERROR in ./node_modules/react-bootstrap/lib/utils/bootstrapUtils.js
Module not found: Error: Can't resolve '@babel/runtime/core-js/object/entries' in '/Applications/MAMP/htdocs/react_integration/node_modules/react-bootstrap/lib/utils'
 @ ./node_modules/react-bootstrap/lib/utils/bootstrapUtils.js 13:38-86
 @ ./node_modules/react-bootstrap/lib/Button.js
 @ ./resources/assets/js/components/CreateItem.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./node_modules/react-bootstrap/lib/Button.js
Module not found: Error: Can't resolve '@babel/runtime/core-js/object/values' in '/Applications/MAMP/htdocs/react_integration/node_modules/react-bootstrap/lib'
 @ ./node_modules/react-bootstrap/lib/Button.js 8:37-84
 @ ./resources/assets/js/components/CreateItem.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

基本上，它不喜欢引导程序。这一行

import Button from 'react-bootstrap/lib/Button';

当我删除它时，它也不支持 es6 语法。现在，我不能在我的项目中同时使用 es6 (babel) 和 bootstrap。我尝试将 .babelrc 文件添加到我的项目根文件夹中，其中包含以下内容。

{
    "presets": [
      ["es2015", {
        "modules": false
      }],
      "react"
    ]
  }

它仍然抛出同样的错误。那么，出了什么问题？如何在 Laravel 项目中将 React 与 babel 和 react-bootstrap 一起使用？我该如何解决这个错误？

在浏览器控制台中，我收到了这个错误。

Uncaught Error: Cannot find module "@babel/runtime/core-js/object/values"
    at webpackMissingModule (app.js:60211)
    at Object.module.exports (app.js:60211)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:59878)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:15646)
    at __webpack_require__ (app.js:20)
    at Object.defineProperty.value (app.js:15631)
    at __webpack_require__ (app.js:20)
    at app.js:63

Answer 1

这是您最近遇到的一个错误，使 react-bootstrap 的 0.32.2 版本与使用的 babel 版本不兼容：

https://github.com/react-bootstrap/react-bootstrap/issues/3231

我们暂时将 react-bootstrap 版本修复为 0.32.1 作为解决方法。