Unexpected token import

When I replace my hypernova.js file with the example code provided I get this error. I am using Create React App and my hypernova.js file is placed outside the src folder. Here is my code.

import { renderReact } from 'hypernova-react';
import App from './src/App';

export default renderReact(
    'App.hypernova.js', // this file's name (or really any unique name)
    App,
);

node hypernova.js 
/srv/project/theme/adminlte/ui/hypernova.js:1
(function (exports, require, module, __filename, __dirname) { import { renderReact } from 'hypernova-react';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:383:7)
    at startup (bootstrap_node.js:149:9)

[ljharb]

CRA doesn’t have server-rendering, so it’s highly unlikely you can get hypernova working with it without ejecting.

We can keep discussing here, but since this isn’t related to hypernova, but rather general node questions, I’m going to close the issue.

[aftabnaveed]

Thanks guys for your patience being new to Node I did not had any idea what was going on. I am now able to transpile my code from babel to ES5 which is then passed to Hypernova. All I had to do was was add babel dev dependencies to my project.

Here is how my Create React App package.json now looks

{
  "name": "ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.0.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1",
    "reactstrap": "^5.0.0-beta.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build-ssr": "webpack --config webpack.ssr.config.js",
    "start-ssr": "node ./src/ssr/hypernova-server.js"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "hypernova": "^2.2.3",
    "hypernova-react": "^2.1.0",
    "svg-loader": "^0.0.2",
    "webpack-node-externals": "^1.6.0"
  }
}

and webpack.config.ssr.json

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
    entry: './app/ssr.js',
    target: 'node',
    externals: [nodeExternals()],
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, 'ssr'),
        filename: 'ssr-bundle.js'
    },
    module: {
        rules: [
            { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ },
            { test: /\.svg?$/, use: 'svg-loader' },
            { test: /\.css?$/, use: 'css-loader' },
            { test: /\.(gif|png|jpe?g|svg)$/i, use: 'image-webpack-loader' },
        ]
    },
    resolve: {
        modules: ['app', 'node_modules'],
        extensions: ['.js', '.jsx']
    },
};