heroku ./node_modules/bootstrap/dist/js/bootstrap.js 未找到模块：无法解析 'popper.js'

Question

大家好，我是 heroku 的新手，

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

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 应用程序：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"
  }
}

Answer 1

TLDR

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

说明

Heroku 试图减少项目的捆绑输出，在设置项目时未安装 devDependencies。

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

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

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

Answer 2

访问 bootstrap 文档网站和 select 您正在使用的 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.

注意：检查脚本的相应版本。

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

twitter-bootstrap

reactjs

popper.js