CODEWITHSUNDEEP
reactjsbootstrap-4babeljs
Hitesh Chauhan
Hitesh Chauhan

Reputation: 1074

Not able to import bootstrap with reactjs with babel

I am not able to import bootstrap with reactjs using babel with the following code. i used the following cdn to achieve the results.

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'/>
    <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" />
</head>
<body>
    <div id='root'></div>
    <script type='text/babel'>
    class App extends React.Component{    
        render(){
            return (   
                <div>
                    <div class="jumbotron">
                    <h1 class="display-4">Amazing React, Bootstrap and Webpack</h1>
                    <p class="lead">Created with love</p>
                    <hr class="my-4"/>
                    <p>It uses utility classes for typography and spacing to space content out
                    within the larger container.</p>
                    <p class="lead">
                    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                    </p>
                    </div>
                </div>
            );
          }
        } 
        ReactDOM.render(
          <App />,
          document.getElementById('root')
        );

    </script>
</body>
</html>

I am getting the following error. I wants to use reactjs only one part of my project.can someone please help how can i solve this problem.

react-bootstrap.min.js:39 Uncaught TypeError: l.a.createContext is not a function
at Module.<anonymous> (react-bootstrap.min.js:39)
at n (react-bootstrap.min.js:1)
at react-bootstrap.min.js:1
at react-bootstrap.min.js:1
at react-bootstrap.min.js:1
at react-bootstrap.min.js:2

Upvotes: 0

Views: 467

Answers (2)

m.sohail
m.sohail

Reputation: 96

This is working alright. Just changed the scripts and all for appropriate versions.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1>App</h1>
    <div id="root"></div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

  <script
    crossorigin
    src="https://unpkg.com/react@16/umd/react.development.js"
  ></script>
  <script
    crossorigin
    src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
  ></script>

  <script
    src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
    crossorigin
  ></script>

  <script type="text/babel">
    class App extends React.Component {
      render() {
        return (
          <div>
            <div className="jumbotron">
              <h1 className="display-4">
                Amazing React, Bootstrap and Webpack
              </h1>
              <p className="lead">Created with love</p>
              <hr className="my-4" />
              <p>
                It uses utility classes for typography and spacing to space
                content out within the larger container.
              </p>
              <p className="lead">
                <a className="btn btn-primary btn-lg" href="#" role="button">
                  Learn more
                </a>
              </p>
            </div>
          </div>
        );
      }
    }

    ReactDOM.render(<App />, document.getElementById("root"));
  </script>
</html>

Upvotes: 1

fjplaurr
fjplaurr

Reputation: 1950

You need a React and React-Dom version 16.X instead of 15.X because it is not being supported anymore.

Here you can find the same issue solved.

Hope this helps.

Upvotes: 1

Related Questions