2

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

1 Answer 1

3

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.

Sign up to request clarification or add additional context in comments.

2 Comments

Cheers, mate. Thanks
And it is now fixed in the 0.32.3 release: github.com/react-bootstrap/react-bootstrap/releases/tag/v0.32.3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.