After adding SSR to my app, I ended up using some ES6 in my server's index.js file, and now I'm having a problem getting it to run on Heroku again.
I've done a lot of research and understand that using ES6 requires babel to transpile the server file, but pretty much everyone's recommendations I can find typically ended up with requiring the .babelrc file, or specifying/installing the presets, but from what I can tell, I've already done this.
I'm finding that the more I try to troubleshoot this, the more confused I'm becoming, so I wanted to reach out on here for some discussion :) thanks everyone (Full code: https://github.com/trm313/mern-boiler)
Heroku errors
2017-05-08T14:35:04.470656+00:00 app[web.1]: [32m[nodemon] starting `babel-node index.js --presets react,es2015`[39m
2017-05-08T14:35:04.545063+00:00 app[web.1]: You have mistakenly installed the `babel` package, which is a no-op in Babel 6.
2017-05-08T14:35:04.545069+00:00 app[web.1]: Babel's CLI commands have been moved from the `babel` package to the `babel-cli` package.
2017-05-08T14:35:04.545070+00:00 app[web.1]:
2017-05-08T14:35:04.545071+00:00 app[web.1]: npm uninstall -g babel
2017-05-08T14:35:04.545072+00:00 app[web.1]: npm install --save-dev babel-cli
2017-05-08T14:35:04.545072+00:00 app[web.1]:
2017-05-08T14:35:04.545073+00:00 app[web.1]: See http://babeljs.io/docs/usage/cli/ for setup instructions.
2017-05-08T14:35:04.554946+00:00 app[web.1]: [31m[nodemon] app crashed - waiting for file changes before starting...[39m
Of the following scripts, "npm run start" works fine locally, but fails when uploaded to Heroku. It complains that I need to use the 'babel-cli' package instead of 'babel', which I'm already doing.. (Same for "start-dev")
package.json
{
"name": "react-authentication",
"version": "1.0.0",
"engines": {
"node": "4.4.3",
"npm": "4.2.0"
},
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon --use-strict index.js",
"bundle": "webpack",
"start-old": "node index.js",
"postinstall": "webpack -p",
"start-dev": "babel-node index.js --presets react,es2015",
"start": "nodemon index.js --exec babel-node --presets react,es2015",
"build": "babel lib -d dist --presets react,es2015",
"serve": "node dist/index.js",
"prod": "NODE_ENV=production node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.15.3",
"babel-cli": "^6.24.1",
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-register": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.16.1",
"client-sessions": "^0.7.0",
"cookie-parser": "^1.4.3",
"express": "^4.14.1",
"express-session": "^1.15.1",
"fs": "0.0.1-security",
"jsonwebtoken": "^7.3.0",
"material-ui": "^0.17.0",
"mongoose": "^4.8.3",
"nodemon": "^1.11.0",
"passport": "^0.3.2",
"passport-facebook": "^2.1.1",
"passport-local": "^1.0.0",
"path": "^0.12.7",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.3",
"react-router": "^3.0.2",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.6.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"validator": "^6.2.1",
"webpack": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"nodemon": "^1.11.0",
"webpack": "^2.2.1"
}
}
webpack.config.js
const path = require('path');
module.exports = {
// the entry file for the bundle
entry: path.join(__dirname, '/client/src/app.js'),
// the bundle file we will get in the result
output: {
path: path.join(__dirname, '/client/dist/js'),
filename: 'app.js',
},
module: {
// apply loaders to files that meet given conditions
loaders: [{
test: /\.js$/,
include: path.join(__dirname, '/client/src'),
loader: 'babel-loader',
query: {
presets: ["react", "es2015"]
}
}],
},
resolve: {
extensions: ['.js', '.jsx']
},
// start Webpack in a watch mode, so Webpack will rebuild the bundle on changes
watch: false
};
.babelrc
{
"presets": ["react", "es2015"]
}
via trm313
No comments:
Post a Comment