How to fix this error : " Module not found :can't resolve popper.js "

jquery reactjs react-bootstrap react-popper
Ranindu picture Ranindu · Aug 12, 2019 · Viewed 19.2k times · Source

After import the Bootstrap and Jquery this error is showning when compiling.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';

global.jQuery = require('jquery');
require('bootstrap');

Answer

acesmndr picture acesmndr · Aug 12, 2019

Popper.js is a dependency of Bootstrap 4 which is used for showing popups. It is a peer dependency of bootstrap meaning it is something that bootstrap requires but doesn't include with itself when installed. So to install popper.js run

npm install popper.js --save

It is setup as a peer dependency because some people just use the css of Bootstrap without the javascript. jQuery and popper.js are the peer dependencies which needs to be installed separately. If you require the javascript of Bootstrap you need to install jQuery and popper.js alongside Bootstrap 4.

Related questions

React-Bootstrap Dropdown with Input won't stay open

I am using React-Bootstrap DropDown with an Input inside a MenuItem (otherwise the console yells at me Uncaught TypeError: Cannot read property 'focus' of undefined) Okay so the drop down renders, and the input is inside a menu item (all …

Read More
React JS onClick event handler

I have var TestApp = React.createClass({ getComponent: function(){ console.log(this.props); }, render: function(){ return( <div> <ul> <li onClick={this.getComponent}>Component 1</li> </ul> </div> ); } }); React.renderComponent(<…

Read More
How to use JQuery with ReactJS

I'm new to ReactJS. Previously I've used jQuery to set any animation or feature that I needed. But now I'm trying to use ReactJS and minimize the use of jQuery. My Case is: I'm trying to build an accordion with …

Read More