Imported component getting: Unexpected token import

Question

My express's app.js loads in my main template file like this:

app.get('/', routes.index);

Where routes.index is:

exports.index = function(req, res){
  res.render('Index', { title: 'Express' });
};

My Index.jsx is my main template which looks like this:

import React from 'react';
import Layout from './layout';
import NetworkCanvas from '../lib/components/NetworkCanvas/Canvas.jsx';

class Index extends React.Component {
  render() {
    return (
          <html>
            <head>
              <title>{this.props.title}</title>
            </head>
            <body>
              <NetworkCanvas />
            </body>
          </html>
    );
  }
}

However, when my localhost:8000 loads I keep getting the error:

/MyWebpage/lib/components/NetworkCanvas/Canvas.jsx:1
(function (exports, require, module, __filename, __dirname) { import React from 'react';
                                                              ^^^^^^
SyntaxError: Unexpected token import

How is it possible that the import statements in my Index.jsx work but the ones in the subcomponent don't?

Note that I'm using express-react-views for my express engine.

Edit: Here's my Canvas.jsx:

import React from 'react';

class Canvas extends React.Component {
    constructor() {
        this.state = {
            width: '0',
            height: '0'
        }
    }

    render() {
        return (
            <canvas 
                width={this.state.width} 
                height={this.state.height}
                ref={(el) => {this.canvas = el}}>
            </canvas>
        );
    }
}

export default Canvas;

Edit 2:: Here is my project. Thanks all for the help!

https://github.com/MarksCode/PersonalWebsite

Are you transpiling both components? See this answer: https://stackoverflow.com/a/37634418/3662110 — jmargolisvt, Sep 10 '17 at 02:28
@jmargolisvt I'm starting my server using this script: `"pm2 start app.js --watch --interpreter ./node_modules/.bin/babel-node"` and my babel presets are `"react", "env", "es2015"`. — MarksCode, Sep 10 '17 at 02:50
Could you possibly share your complete `app.js` ? @MarksCode — KeshavDulal, Sep 10 '17 at 04:47

score 2 · Accepted Answer · answered Sep 10 '17 at 05:32

I cloned the repo and it seems that currently all your jsx files or lets say components are under lib directory. I moved them under views directory and changed the import line as:

import NetworkCanvas from './lib/components/NetworkCanvas/Canvas.jsx';

and the error gets resolved because the Docs says that only the files inside views directory will be transpiled.

Only the files in your views directory (i.e. app.set('views', __dirname + '/views')) will be compiled.

Hence the import error which you were facing.

Additional info:

Once the import errors is resolved you will get another error in Canvas.jsx So you will need to add the following at the top of your constructor.

super(props);

Thanks. I saw many other projects with a `/lib` directory so got confused. Guess I should learn to read docs better. — MarksCode, Sep 10 '17 at 05:53

Imported component getting: Unexpected token import

1 Answers1