Question

我正在使用React和Laravel开发一个Web应用程序。我希望两者都在同一个项目中。因此，在Laravel应用程序中，我通过此链接https://appdividend.com/2017/08/31/laravel-5-5-reactjs-tutorial/使用预置（php artisan预置react）安装了react。我的设置正在工作。在某个时候，我还安装了react bootstrap以及运行此命令。

npm install react-bootstrap --save

然后我在项目中使用了这样的bootstrap Button组件。

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）和引导程序。我也尝试将.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

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

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

我们暂时将react-bootstrap版本固定为0.32.1，作为解决方法。

无法与Laravel配合使用babel和react-bootstrap

1 个答案: