CODEWITHSUNDEEP
reactjslaravelbabeljsreact-bootstrap
Wai Yan Hein
Wai Yan Hein

Reputation: 14801

Unable to use babel and react-bootstrap in react with Laravel

I am developing a Web application using React and Laravel. I want both to be in the same project. So in the Laravel application, I installed react using preset (php artisan preset react) following this link, https://appdividend.com/2017/08/31/laravel-5-5-reactjs-tutorial/. My set up was working. At some point, I installed the react bootstrap as well running this command.

npm install react-bootstrap --save

Then I used the bootstrap Button component like this in my project.

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;

It was still working fine. Then, I used the es6 syntax in my component like this.

class CreateItem extends Component {

  addItem = () => {

  }
  //other code
}
export default CreateItem;

When I run it was throwing error because I used the es6 syntax. So, to solve the errors, I installed the required babel packages running the following command.

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

When I run "npm run watch", it is throwing this error.

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

Basically, it does not like the bootstrap. This line

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

When I remove it, it does not support the es6 syntax as well. Now, I cannot use both es6 (babel) and the bootstrap in my project. I tried adding the .babelrc file into my project root folder with the following content as well.

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

It is still throwing the same error. So, what went wrong? How can I use React with babel and react-bootstrap inside a Laravel project together? How can I fix this error?

In the browser console, I got this error.

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

Upvotes: 2

Views: 1237

Answers (1)

Jaap
Jaap

Reputation: 724

This is a recently introduced bug you are hitting, making the 0.32.2 version of react-bootstrap incompatible with the babel version used:

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

We temporarily fixed the react-bootstrap version to 0.32.1 as a workaround.

Upvotes: 3

Related Questions