CODEWITHSUNDEEP
node.jsreactjstwitter-bootstrapherokupopper.js
Elon T
Elon T

Reputation: 21

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

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"
  }
}

Upvotes: 1

Views: 2440

Answers (2)

Siddharth Magadum
Siddharth Magadum

Reputation: 37

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.

Upvotes: 0

cross19xx
cross19xx

Reputation: 3487

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

Upvotes: 1

Related Questions