进口组合获得：意外令牌进口

我明确的app.js负载在我的主模板文件是这样的：进口组合获得：意外令牌进口

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

其中routes.index是：

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

我Index.jsx是我的主模板看起来像这样：

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> 
    ); 
    } 
}

但是，当我的localhost：8000加载时，我不断收到错误：

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

这怎么可能是import语句在我Index.jsx工作，但鸡舍的子不？

请注意，我为我的快速引擎使用express-react-views。

编辑：这是我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;

编辑2：：这里是我的项目。感谢所有的帮助！

https://github.com/MarksCode/PersonalWebsite

来源

2017-09-10 MarksCode

为什么你在'render'中有两个'return'？ – jmargolisvt

@jmargolisvt对不起，错过了我的文件。 – MarksCode

@Federkun补充说。 – MarksCode

我克隆回购，似乎目前所有jsx文件或让说components是lib目录下。我搬到他们views目录下，改变了进口路线为：

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

和错误得到解决，因为Docs说，只有内部views目录中的文件将被transpiled。

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

因此，您遇到的import错误。

附加信息：

一旦import错误得到解决，你会在Canvas.jsx 得到另一个错误所以你需要添加下面的构造函数的顶部。

super(props);

来源

2017-09-10 05:32:13 keshavDulal

谢谢。我看到很多其他项目都带有'/ lib'目录，所以很困惑。猜猜我应该学会更好地阅读文档。 – MarksCode

进口组合获得：意外令牌进口

回答

相关问题