Import React in Node.js throws SyntaxError: Unexpected token export

Question

I'm trying to implement SSR with Node.js and React following this example https://github.com/babel/example-node-server as advised in the official Babel docs here http://babeljs.io/docs/usage/cli/#babel-node

For development, I'm using babel-node; for production I want to transpile my server with babel and run it with node:

package.json

"scripts": {
  "start": "node ./dist/server/index.js",
  "dev:server": "nodemon ./src/server/index.js -x babel-node",
  "build:server": "babel ./src/server -d ./dist/server --copy-files -s inline"
},
"babel": {
  "presets": [
    "env",
    "react",
    "stage-2"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

The server is written with ES6 syntax:

src/server/index.js

import 'babel-polyfill'
import './config'
import Express from 'express'
import bootstrap from './bootstrap'

const app = Express()
bootstrap(app)

export default app

Then in some route I import my React components to render it into HTML on request:

src/server/routes/admin.js

import { Router } from 'express'
import React from 'react'
import createHistory from 'history/createMemoryHistory'
import { renderToString } from 'react-dom/server'
import { Provider } from 'react-redux'
import { StaticRouter, matchPath } from 'react-router'
import configureStore from '../../../src/admin/store'
import routes from '../../../src/admin/routes'
import Root from '../../../src/admin/containers/Root'
// etc.

The error is thrown when server tries to import React components

./src/admin/store/index.js:11
export default configureStore
^^^^^^

SyntaxError: Unexpected token export

I tried using babel-register in the server, and it works, but it's not recommended to use it in production mode, so I would rather not do it.

Also, when inspecting the built server code, I find:

dist/server/routes/admin.js

var _store = require('../../../src/admin/store');

It means that it's still referencing the src folder. Ideally I'd like to somehow incorporate those modules into the built server code, so I could safely remove the src folder from the production environment, leaving only dist.

Edit

Different from Babel 6 CLI: Unexpected token export?

not sure, check this may be solve your issue Babel 6 CLI: Unexpected token export? — Mayank Shukla
– Mayank Shukla, Commented Jul 5, 2017 at 10:25

rsp · Accepted Answer · 2017-07-05 10:37:59Z

2

That's because you are transpiling only ./src/server and not ./src/admin. Then in ./src/server you have export keyword not translated by Babel and the export keyword is not supported by Node - to see why, see those answers:

You need to transpile all of the code that uses syntax that is not natively supported by Node, not only some of it.

Adding a script like this to your package.json might help, depending on how your ./src and ./dist is organized:

"build:all": "babel ./src -d ./dist --copy-files -s inline"

Of course not knowing what you have in ./src apart from server and admin it's hard to give you a specific solution - but that's a good direction to start from.

edited Jul 5, 2017 at 10:37

answered Jul 5, 2017 at 10:32

rsp

112k31 gold badges210 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anton Egorov Over a year ago

Thanks, exactly what I was missing in my config. In ./src there are server, two react entry points (one for client and one for admin) and styles, so I've also added --ignore ./src/styles into the build command. Works like a charm 👍

Collectives™ on Stack Overflow

Import React in Node.js throws SyntaxError: Unexpected token export

package.json

src/server/index.js

src/server/routes/admin.js

dist/server/routes/admin.js

Edit

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

package.json

src/server/index.js

src/server/routes/admin.js

dist/server/routes/admin.js

Edit

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related