I’m using react + next.js + wordpress api (wp is hosted somewhere else). The _document.js is where the project all starts. So, in my procfile
, I have:
web: node pages/_document.js
But it doesn’t seem like Heroku likes that underscore. Can someone please help??
Heroku Logs
...
2017-08-02T23:25:58.694324+00:00 heroku[web.1]: Starting process with command `node pages/_document.js`
2017-08-02T23:26:00.609211+00:00 app[web.1]: /app/pages/_document.js:1
2017-08-02T23:26:00.609234+00:00 app[web.1]: (function (exports, require, module, __filename, __dirname) { import Document, { Head, Main, NextScript } from 'next/document';
2017-08-02T23:26:00.609235+00:00 app[web.1]: ^^^^^^
2017-08-02T23:26:00.609236+00:00 app[web.1]:
2017-08-02T23:26:00.609237+00:00 app[web.1]: SyntaxError: Unexpected token import
2017-08-02T23:26:00.609238+00:00 app[web.1]: at createScript (vm.js:56:10)
2017-08-02T23:26:00.609238+00:00 app[web.1]: at Object.runInThisContext (vm.js:97:10)
2017-08-02T23:26:00.609239+00:00 app[web.1]: at Module._compile (module.js:542:28)
2017-08-02T23:26:00.609240+00:00 app[web.1]: at Object.Module._extensions..js (module.js:579:10)
2017-08-02T23:26:00.609240+00:00 app[web.1]: at Module.load (module.js:487:32)
2017-08-02T23:26:00.609241+00:00 app[web.1]: at tryModuleLoad (module.js:446:12)
2017-08-02T23:26:00.609242+00:00 app[web.1]: at Module.runMain (module.js:604:10)
2017-08-02T23:26:00.609241+00:00 app[web.1]: at Function.Module._load (module.js:438:3)
2017-08-02T23:26:00.609243+00:00 app[web.1]: at run (bootstrap_node.js:389:7)
2017-08-02T23:26:00.609243+00:00 app[web.1]: at startup (bootstrap_node.js:149:9)
2017-08-02T23:26:00.670350+00:00 heroku[web.1]: State changed from starting to crashed
2017-08-02T23:26:00.673110+00:00 heroku[web.1]: State changed from crashed to starting
2017-08-02T23:26:00.655633+00:00 heroku[web.1]: Process exited with status 1
2017-08-02T23:26:04.035702+00:00 heroku[web.1]: Starting process with command `node pages/_document.js`
2017-08-02T23:26:06.079168+00:00 heroku[web.1]: Process exited with status 1
2017-08-02T23:26:05.997361+00:00 app[web.1]: ^^^^^^
....
package.json
{
"name": "my-project",
"author": "me",
"version": "1.0.0",
"private": true,
"dependencies": {
"babel-plugin-styled-components": "^1.1.7",
"babel-preset-stage-0": "^6.24.1",
"classnames": "^2.2.5",
"express": "4.14.0",
"isomorphic-fetch": "2.2.1",
"lru-cache": "4.0.2",
"next": "2.0.0-beta.16",
"nprogress": "0.2.0",
"prop-types": "^15.5.10",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"styled-components": "^2.1.1"
},
"scripts": {
"build": "next build",
"start": "node server.js",
"now-start": "NODE_ENV=production node server.js",
"test": "jest"
}
}
server.js
const express = require('express');
const next = require('next');
const LRUCache = require('lru-cache');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dir: '.', dev });
const handle = app.getRequestHandler();
const ssrCache = new LRUCache({
max: 100,
maxAge: 1000 * 60 * 60,
});
const PORT = process.env.PORT || 3001;
function renderAndCache(req, res, pagePath, queryParams) {
if (ssrCache.has(req.url)) {
console.log(`CACHE HIT: ${req.url}`);
res.send(ssrCache.get(req.url));
return;
}
app.renderToHTML(req, res, pagePath, queryParams)
.then((html) => {
console.log(`CACHE MISS: ${req.url}`);
ssrCache.set(req.url, html);
res.send(html);
})
.catch((err) => {
app.renderError(err, req, res, pagePath, queryParams);
});
}
app.prepare()
.then(() => {
const server = express();
server.get('/beaches/:id/:slug', (req, res) => {
return renderAndCache(req, res, '/post', Object.assign(
req.query,
req.params
));
});
server.get('/', (req, res) => {
return renderAndCache(req, res, '/', req.query);
});
server.get('*', (req, res) => {
return handle(req, res);
});
server.listen(PORT, (err) => {
if (err) throw err;
console.log('> Ready on ' + PORT);
});
})
.catch(error => {
console.error(error);
process.exit(0);
});