上传到 Heroku 后 React 应用程序无法正常工作答案

【问题标题】：React app not working after uploading to Heroku上传到 Heroku 后 React 应用程序无法正常工作
【发布时间】：2018-04-23 18:24:12
【问题描述】：

我正在构建的应用程序在开发中运行良好，但是当我将它上传到 heroku 时它不起作用。申请：https://react-expense-manager-sujan.herokuapp.com/

我收到以下错误：

Uncaught SyntaxError: Unexpected token

我认为我的 bundle.js 无法正常工作。

Heroku 构建日志：

    -----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       engines.yarn (package.json):  unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.11.1...
       Using default npm version: 5.6.0
       Resolving yarn version 1.x...
       Downloading and installing yarn (1.6.0)...
       Installed yarn 1.6.0
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (yarn.lock)
       yarn install v1.6.0
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       warning Pattern ["object-assign@latest"] is trying to unpack in the same destination "/tmp/yarncache.yn2Gs/v1/npm-object-assign-4.1.1-2109adc7965887cfc05cbbd442cac8bfbb360863" as pattern ["object-assign@^4.1.0","object-assign@^4.1.0","object-assign@^4.1.1","object-assign@^4.0.1","object-assign@^4.0.1","object-assign@^4.0.1","object-assign@^4.1.0","object-assign@^4.1.0","object-assign@^4","object-assign@^4.0.1","object-assign@^4.1.1","object-assign@^4.1.0","object-assign@^4.1.1","object-assign@^4.1.1","object-assign@^4.0.1"]. This could result in non-deterministic behavior, skipping.
       warning Pattern ["send@latest"] is trying to unpack in the same destination "/tmp/yarncache.yn2Gs/v1/npm-send-0.16.2-6ecca1e0f8c156d141597559848df64730a6bbc1" as pattern ["send@0.16.2","send@0.16.2"]. This could result in non-deterministic behavior, skipping.
       info fsevents@1.1.3: The platform "linux" is incompatible with this module.
       info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > react-datepicker@1.4.1" has incorrect peer dependency "moment@^2.20.0".
       [4/4] Building fresh packages...
       Done in 21.32s.
       Running heroku-postbuild (yarn)
       yarn run v1.6.0
       $ yarn run build:prod
       $ webpack -p --env production
The CLI moved into a separate package: webpack-cli
       Would you like to install webpack-cli? (That will run yarn add -D webpack-cli) (yes/NO)Done in 0.66s.
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       yarn install v1.6.0
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       warning Pattern ["object-assign@latest"] is trying to unpack in the same destination "/tmp/yarncache.yn2Gs/v1/npm-object-assign-4.1.1-2109adc7965887cfc05cbbd442cac8bfbb360863" as pattern ["object-assign@^4.1.0","object-assign@^4.1.0","object-assign@^4.1.1","object-assign@^4.0.1","object-assign@^4.0.1","object-assign@^4.0.1","object-assign@^4.1.0","object-assign@^4.1.0","object-assign@^4","object-assign@^4.0.1","object-assign@^4.1.1","object-assign@^4.1.0","object-assign@^4.1.1","object-assign@^4.1.1","object-assign@^4.0.1"]. This could result in non-deterministic behavior, skipping.
       warning Pattern ["send@latest"] is trying to unpack in the same destination "/tmp/yarncache.yn2Gs/v1/npm-send-0.16.2-6ecca1e0f8c156d141597559848df64730a6bbc1" as pattern ["send@0.16.2","send@0.16.2"]. This could result in non-deterministic behavior, skipping.
       info fsevents@1.1.3: The platform "linux" is incompatible with this module.
       info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > react-datepicker@1.4.1" has incorrect peer dependency "moment@^2.20.0".
       [4/4] Building fresh packages...
       warning Ignored scripts due to flag.
       Done in 5.62s.
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 41.2M
-----> Launching...
       Released v6
       https://react-expense-manager-sujan.herokuapp.com/ deployed to Heroku

我的包.JSON

{
  "name": "BoilerPlate",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Sujan",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build:dev": "webpack",
    "build:prod": "webpack -p --env production",
    "dev-server": "webpack-dev-server",
    "test": "jest",
    "start" : "node server/server.js",
    "heroku-postbuild" : "yarn run build:prod"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "^0.28.11",
    "express": "^4.16.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "jest": "^22.4.3",
    "live-server": "^1.2.0",
    "moment": "2.18.1",
    "node-sass": "^4.8.3",
    "react": "^16.3.0",
    "react-datepicker": "^1.4.1",
    "react-dom": "^16.3.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "uuid": "^3.2.1",
    "validator": "^9.4.1",
    "webpack": "^4.4.1",
    "webpack-dev-server": "^3.1.1"
  }
}

任何帮助将不胜感激。

新错误：

 ERROR in ./src/routers/AppRouter.js
       Module not found: Error: Can't resolve '../components/HelpPage' in '/tmp/build_44d57a1b64b926d484f0d216b8ec1537/src/routers'
       @ ./src/routers/AppRouter.js 29:16-49
       @ ./src/app.js
       Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js??ref--5-2!src/styles/style.scss:
       Entrypoint undefined = extract-text-webpack-plugin-output-filename
       [1] ./node_modules/css-loader??ref--5-1!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/styles/style.scss 1.01 KiB {0} [built]
       + 1 hidden module
       Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js??ref--5-2!node_modules/react-datepicker/dist/react-datepicker.css:
       Entrypoint undefined = extract-text-webpack-plugin-output-filename
       2 modules
error Command failed with exit code 2.
       info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
       info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       Some possible problems:

       - Node version not specified in package.json
       https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version

       Love,
       Heroku

 !     Push rejected, failed to compile Node.js app.
 !     Push failed

【问题讨论】：

标签： reactjs heroku

【解决方案1】：

您在 AppRouter.js 中导入了一个名为 ../component/HelpPage 的文件，该文件不存在检查您的组件文件夹中是否有 HelpPage 或者您在 AppRouter.js 中的路径不正确以导入 HelpPage。

【讨论】：

非常感谢。我在那里打错字了。我创建了一个文件 helpPage.js。真是个愚蠢的错误。

【解决方案2】：

您可以在 chrome 中轻松查看bundle.js 的响应

这意味着您在此步骤中创建捆绑包失败

  $ webpack -p --env production
The CLI moved into a separate package: webpack-cli
       Would you like to install webpack-cli? (That will run yarn add -D webpack-cli) (yes/NO)Done in 0.66s.
-----> Caching build

所以可能只是运行 yarn add webpack-cli 并再次重新部署

【讨论】：

我收到另一个错误。请查看更新后的问题。
@SujanShrestha please show contents of AppRouter.js 看起来你搞砸了 webpack 配置，错误显示找不到Can't resolve '../components/HelpPage' in '/tmp/build_44d57a1b64b926d484f0d216b8ec1537/src/routers' 你的目录中有src/components/HelpPage.js吗？跨度>
@SujanShrestha 也请添加这里提到的引擎部分devcenter.heroku.com/articles/…你可以添加"node" : "8.9.x"
非常感谢。我在那里打错字了。我创建了一个文件 helpPage.js。真是个愚蠢的错误。

【解决方案3】：

我遇到了几乎相同的错误，但我的错误略有不同，我面临的错误与唯一一个名为“smartbagContext”的文件有关，所以无论我在哪里导入该文件，都会导致路径和文件名以及所有内容出现错误是正确的，但是当我将文件名更改为“appContext”时，它工作正常。

【讨论】：