Проблема развертывания на Heroku с использованием Nodejs Webpack и Babel - PullRequest
0 голосов
/ 03 апреля 2019

Я создал свое приложение, используя реакцию с webpack, babel и nodejs в качестве сервера (приложение работает с SSR). Мое приложение отлично работает на моем локальном компьютере, но не удалось развернуть на Heroku.

Package.json

 {
  "name": "github-battle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "webpack -p  && npm run build",
    "build-css": "node-sass --include-path scss src/shered/app/main.scss   src/shered/app/index.css",
    "watch-css": "nodemon -e scss -x \"npm run build-css\""
  },
  "engines": {
    "node": "8.10.0",
    "npm": "6.4.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@sendgrid/mail": "^6.3.1",
    "axios": "^0.18.0",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.18.3",
    "config": "^3.0.1",
    "cors": "^2.8.5",
    "dotenv": "^7.0.0",
    "express": "^4.16.4",
    "hogan.js": "^3.0.2",
    "ignore-styles": "^5.0.1",
    "isomorphic-fetch": "^2.2.1",
    "jsonwebtoken": "^8.5.1",
    "knex": "^0.16.3",
    "node-sass": "^4.11.0",
    "nodemailer": "^6.0.0",
    "nodemailer-sendgrid-transport": "^0.2.0",
    "paypal-rest-sdk": "^1.8.1",
    "pg": "^7.9.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "serialize-javascript": "^1.6.1",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
    "@babel/plugin-transform-runtime": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.4.2",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1",
    "webpack-node-externals": "^1.7.2"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');

const browserConfig = {
    entry: './src/browser/index.js', // Where the app starts
    output: {
        path: path.resolve(__dirname, 'public'), // creating a folder name dist in the courent directory
        filename: 'bundle.js', // a file that will be create inside the dist folder
        publicPath: '/'
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: 'babel-loader' },
            { test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader" },
            { test: /\.(s*)css$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]}
        ]
    },
    mode: 'production',
    plugins: [
        new webpack.DefinePlugin({
            __isBrowser__: "true"
        })
    ]
}

const serverConfig = {
    entry: './src/server/index.js',
    target: 'node',
    externals: [nodeExternals()],
    output: {
      path: __dirname,
      filename: 'server.js',
      publicPath: '/'
    },
    module: {
      rules: [
        { test: /\.(js)$/, use: 'babel-loader' },
        { test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader" },
            { test: /\.(s*)css$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]}
      ]
    },
    mode: 'production',
    plugins: [
      new webpack.DefinePlugin({
        __isBrowser__: "false"
      })
    ]
  }

  module.exports = [browserConfig, serverConfig]

Используя команду Heroku logs --tail, я обнаружил эту ошибку, но все попытки исправить ее не увенчались успехом

 Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
2019-04-03T00:21:39.395676+00:00 app[web.1]: SyntaxError: /Users/itzikshaoulian/Desktop/gitPractice/hamilton-beach/src/server/index.js: Unexpected token (458:16)
2019-04-03T00:21:39.395678+00:00 app[web.1]: 
2019-04-03T00:21:39.395680+00:00 app[web.1]:   456 |             const context = { data }
2019-04-03T00:21:39.395681+00:00 app[web.1]:   457 |             const markup = renderToString(
2019-04-03T00:21:39.395683+00:00 app[web.1]: > 458 |                 <Provider store={store}>
2019-04-03T00:21:39.395685+00:00 app[web.1]:       |                 ^
2019-04-03T00:21:39.395703+00:00 app[web.1]:   459 |                     <StaticRouter location={req.url} context={context}>
2019-04-03T00:21:39.395706+00:00 app[web.1]:   460 |                         <Main />    
2019-04-03T00:21:39.395707+00:00 app[web.1]:   461 |                     </StaticRouter>

Героку также говорит, что:

remote: -----> Pruning devDependencies
remote:        Skipping because NPM_CONFIG_PRODUCTION is 'false'

Когда он был установлен в true, он говорил то же самое

...