Heroku + react + next.js + wordpress - Syntax error, but what do I do?

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);
});
1 Like

can’t help sorry. at least you are attempted something that seems cool. good luck to you.

Looking at the error you’re getting it doesn’t look like the underscore is the problem. It says that there is an unexpected token import. I don’t really have a definite idea as to what’s causing the error. Are you using babel to transpile the ES6 syntax?
Try installing babel-preset-es2015. I noticed it’s not in your package.json.