Я создал свое приложение, используя реакцию с 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, он говорил то же самое