heroku ./node_modules/bootstrap/dist/js/bootstrap.js Module not found: Can't resolve 'popper.js'

Question

Hi every one I am new on heroku,

If I clone from github repo and run >npm install and >npm start on computer its working fine, but on my heroku app it showing error:

Failed to compile ./node_modules/bootstrap/dist/js/bootstrap.js Module not found: Can't resolve 'popper.js' in '/app/node_modules/bootstrap/dist/js'

Heroku app: https://nfq-barber-shop.herokuapp.com/ Github repo: https://github.com/ezopas/nfq-barber-shop I try run these commands:

npm install bootstrap -D
npm install jquery -D
npm install popper.js -D

But still its the same error. What I should to do? My app runs totally fine on other computers (npm start).

package.json:

{
  "name": "nfq-barber-shop-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "font-awesome": "^4.7.0",
    "fullcalendar": "^3.10.0",
    "fullcalendar-reactwrapper-with-scheduler": "^1.1.0",
    "jquery.nicescroll": "^3.7.6",
    "moment": "^2.24.0",
    "nav-scroll-spy": "^1.0.2",
    "node-sass": "^4.11.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.8",
    "react-scripts": "2.1.5",
    "redux": "^4.0.1",
    "sweetalert": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "jquery": "^3.3.1",
    "popper.js": "^1.14.7"
  }
}

score 1 · Accepted Answer · answered Feb 21 '19 at 08:41

TLDR

Move the modules in devDependencies into the dependencies section
Set the config variable NPM_CONFIG_PRODUCTION to false in the Heroku settings

Explanation

Heroku, in a attempt to reduce the bundle output of your project, does not install devDependencies when it is setting up your project.

The general rule of Node application development is that all modules that require do not contribute to the running of your application must go into your devDependencies and all the modules that do go into the dependencies

From the look of your package.json, you do not necessarily have to put anything in the devDependencies since popper and jQuery do belong in the dependencies section.

You can alternatively set the NPM_CONFIG_PRODUCTION variable in Heroku to false, however this is not the recommended approach, because this technically makes the app not a production application

score 0 · Answer 2 · answered Apr 04 '21 at 14:21

Go the the bootstrap documentation website and select the appropriate version of bootstrap you are using. For bootstrap 4, from the docs, add the bootstrapCDN links present in the started template to your index.html file.

For this specific question, add

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

to your index.html.

Note: check the appropriate version for the scripts.

heroku ./node_modules/bootstrap/dist/js/bootstrap.js Module not found: Can't resolve 'popper.js'

2 Answers2