heroku ./node_modules/bootstrap/dist/js/bootstrap.js 找不到模块：无法解析“popper.js”答案

【问题标题】：heroku ./node_modules/bootstrap/dist/js/bootstrap.js Module not found: Can't resolve 'popper.js'heroku ./node_modules/bootstrap/dist/js/bootstrap.js 找不到模块：无法解析“popper.js”
【发布时间】：2019-07-15 02:01:32
【问题描述】：

大家好，我是 heroku 的新手，

如果我从 github repo 克隆并在计算机上运行 >npm install 和 >npm start 它工作正常，但在我的 heroku 应用程序上它显示错误：

无法编译 ./node_modules/bootstrap/dist/js/bootstrap.js 模块未找到：无法解析“popper.js” '/app/node_modules/bootstrap/dist/js'

Heroku 应用程序：https://nfq-barber-shop.herokuapp.com/ Github 仓库：https://github.com/ezopas/nfq-barber-shop 我尝试运行这些命令：

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

但仍然是同样的错误。我应该怎么做？我的应用在其他计算机上运行良好（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"
  }
}

【问题讨论】：

标签： node.js reactjs twitter-bootstrap heroku popper.js

【解决方案1】：

TLDR

将devDependencies 中的模块移动到dependencies 部分
在 Heroku 设置中将配置变量 NPM_CONFIG_PRODUCTION 设置为 false

说明

Heroku 为了减少项目的捆绑输出，在设置项目时不安装 devDependencies。

Node 应用程序开发的一般规则是，所有需要对应用程序运行没有贡献的模块都必须放入您的devDependencies，所有需要的模块都放入dependencies

从您的package.json 的外观来看，您不必在devDependencies 中添加任何内容，因为popper 和jQuery 做属于dependencies 部分。

您也可以将 Heroku 中的 NPM_CONFIG_PRODUCTION 变量设置为 false，但这不是推荐的方法，因为这在技术上使应用程序不是生产应用程序

【讨论】：

【解决方案2】：

访问 bootstrap 文档网站并选择您正在使用的适当版本的 bootstrap。对于 bootstrap 4，从 docs，将启动模板中存在的 bootstrapCDN 链接添加到您的 index.html 文件中。

对于这个特定的问题，添加

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

到您的 index.html。

注意：检查脚本的适当版本。

【讨论】：