CODEWITHSUNDEEP
javascriptexpressreactjswebpack
Paulos3000
Paulos3000

Reputation: 3545

Running Node Express server bringing up error message

New to webpack, trying to run my own server (node server.js), but I get this message:

$ node server.js
/path/to/server.js:3
import path from 'path'
^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.runMain (module.js:575:10)
    at run (bootstrap_node.js:352:7)
    at startup (bootstrap_node.js:144:9)
    at bootstrap_node.js:467:3

My server.js:

require("babel-register");

import path from 'path'
import Express from 'express'
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import counterApp from './reducers'
import App from './containers/App'

import { renderToString } from 'react-dom/server'

const app = Express()
const port = 3000

// This is fired every time a request is made
app.use(handleRender)


function handleRender(req, res) {
   // Create a new Redux store instance
   const store = createStore(counterApp) // this is taken from './reducers'

   // Render the component to a string
   const html = renderToString(
      <Provider store={store}> // Needs an import?
         <App /> // this is defined in './containers/...'
      </Provider>
   )

   // Grab the initial state from our Redux store
   const preloadedState = store.getState()

   // Send the rendered page back to the client
   res.send(renderFullPage(html, preloadedState))
}

// Yet to be defined...
function renderFullPage(html, preloadedState) {
   return
      <!doctype html>
      <html>
         <head>
            <title>Paulos3000 Redux Universal Example</title>
         </head>
         <body>
            <div id='root'>${html}</div>
            <script>
               window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
            </script>
            <script src='/static/bundle.js'></script>
         </body>
      </html>
}

app.listen(port)

Can anyone see a problem with my code? Let me know if you need me to include any more info (not sure exactly what to include as I don't know the source of the problem).

UPDATE:

SyntaxError: /path/to/server.js: Unexpected token (25:6)
  23 |   
  24 |    const html = renderToString(
> 25 |       <Provider>
     |       ^
  26 |          <App />
  27 |       </Provider>
  28 |    )

Upvotes: 1

Views: 239

Answers (2)

robertklep
robertklep

Reputation: 203534

babel-register doesn't apply to the file you use it in, only to files that you subsequently require().

For instance:

// bootstrap.js
require("babel-register");
require("./server");

// server.js
import path from 'path'
import Express from 'express'
import React from 'react'
...

And start the server with:

$ node bootstrap.js

This does assume that you already have a valid Babel setup. If you don't, create a file named .babelrc in the same directory as server.js, containing the following:

{
  "presets": ["es2015", "react"]
}

And also install the preset modules:

$ npm i babel-preset-es2015 babel-preset-react

Upvotes: 1

TimoStaudinger
TimoStaudinger

Reputation: 42520

Depending on your Node version, it doesn't support the import syntax.

Try using imports via require() instead:

const path = require('path').default

Upvotes: 2

Related Questions