Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unexpected token when using "node server.js" with transpiled express server #715

Closed
angel200sdnot opened this issue Jan 10, 2017 · 14 comments
Assignees

Comments

@angel200sdnot
Copy link

I am using babel to transpile everything into a build folder, if i try running server.js with
cd build
node server.js
I get this error
SyntaxError: C:/web-liga/node_modules/next/dist/pages/_error-debug.js?entry: Unexpected token (14:11)

  12 |     const { name, message, stack, path } = this.props
  13 |
> 14 |     return <div className='errorDebug'>
     |            ^
  15 |       <Head>
  16 |         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
  17 |       </Head>

But if i run the server using "npm run dev"

"scripts": {
    "build": "node_modules/.bin/babel ./ --out-dir build -s --ignore node_modules",
    "clean": "rm -rf build && mkdir build",
    "dev": "npm run clean && npm run build && npm run watch",
    "start": "NODE_ENV=production node build/server.js",
    "watch": "node_modules/.bin/babel-watch --exclude components --exclude pages --exclude .next build/server.js"
  }

Everything runs perfectly except that .next is getting compiled outside of the build folder because thats where im running npm from

All of this brings problems when trying to deploy to heroku or now

@aranajhonny
Copy link
Contributor

could you show this file complete, gist or pastebin.

@angel200sdnot
Copy link
Author

angel200sdnot commented Jan 10, 2017

http://pastebin.com/GEWymLmy

This is the file structure

-actions
-build
-components
-database
-layouts
-node_modules
-pages
-reducers
-services
package.json
server.js
store.js

@aranajhonny
Copy link
Contributor

@angel200sdnot was the other file that contains the head.

@angel200sdnot
Copy link
Author

angel200sdnot commented Jan 10, 2017

@aranajhonny None of my files has <Head>

@aranajhonny
Copy link
Contributor

ok but so it is difficult to help you. there must be a syntax error somewhere.

@angel200sdnot
Copy link
Author

angel200sdnot commented Jan 10, 2017

Yeah i know, sorry i've been trying to fix this for days now, in the meantime ive been using the "npm run dev" to keep on developing
If you want the file the error is pointing at its located in the next module, which is this

import React from 'react'
import Head from 'next/head'
import ansiHTML from 'ansi-html'

export default class ErrorDebug extends React.Component {
  static getInitialProps ({ err }) {
    const { name, message, stack, module } = err
    return { name, message, stack, path: module ? module.rawRequest : null }
  }

  render () {
    const { name, message, stack, path } = this.props

    return <div className='errorDebug'>
      <Head>
        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
      </Head>
      {path ? <div className='heading'>Error in {path}</div> : null}
      {
        name === 'ModuleBuildError'
        ? <pre className='message' dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
        : <pre className='message'>{stack}</pre>
      }
      <style jsx global>{`
        body {
          background: #a6004c;
          margin: 0;
        }
      `}</style>
      <style jsx>{`
        .errorDebug {
          height: 100%;
          padding: 16px;
          box-sizing: border-box;
        }

        .message {
          font-family: "SF Mono", "Roboto Mono", "Fira Mono", menlo-regular, monospace;
          font-size: 10px;
          color: #fbe7f1;
          margin: 0;
          white-space: pre-wrap;
          word-wrap: break-word;
        }

        .heading {
          font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
          font-size: 13px;
          font-weight: bold;
          color: #ff84bf;
          margin-bottom: 20pxl
        }
      `}</style>
    </div>
  }
}

const encodeHtml = str => {
  return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
}

// see color definitions of babel-code-frame:
// https://github.com/babel/babel/blob/master/packages/babel-code-frame/src/index.js

ansiHTML.setColors({
  reset: ['fff', 'a6004c'],
  darkgrey: 'e54590',
  yellow: 'ee8cbb',
  green: 'f2a2c7',
  magenta: 'fbe7f1',
  blue: 'fff',
  cyan: 'ef8bb9',
  red: 'fff'
})

I haven't modified any files from the next module

@aranajhonny
Copy link
Contributor

everything looks good, apparently the error has nothing to do directly with next.js you can be on the other side.

@mattecapu
Copy link

try to wrap your returned value with ()

@arunoda
Copy link
Contributor

arunoda commented Jan 10, 2017

@angel200sdnot can we have a sample repo of this? So, we could have a look at this quickly.

@angel200sdnot
Copy link
Author

@arunoda arunoda self-assigned this Jan 10, 2017
@arunoda
Copy link
Contributor

arunoda commented Jan 10, 2017

I can see the error. It's kind a weird. I'm looking at it.

@arunoda
Copy link
Contributor

arunoda commented Jan 10, 2017

@angel200sdnot here's how you can fix this issue.

First of all, remove everything in your node_modules directory.
Then remove node_modules from your babel ignore list.

@angel200sdnot
Copy link
Author

@arunoda This fixed the issue, thanks

@arunoda
Copy link
Contributor

arunoda commented Jan 11, 2017

@angel200sdnot great.
But I want to do a proper fix: #731

@lock lock bot locked as resolved and limited conversation to collaborators May 12, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants