学习ReactJS：未捕获的SyntaxError：意外的令牌导入

我是ReactJS的新手。我试图从出来的egghead.io代码和我不断收到以下错误：学习ReactJS：未捕获的SyntaxError：意外的令牌导入

未捕获的SyntaxError：意外的令牌进口

我已加载巴贝尔现在的两倍，并描述了沿着教训紧随其后，但它只是不会加载到HTML页面。这里是代码：

的index.html

<!DOCTYPE html> 
<html lang = "en"> 

    <head> 
     <meta charset = "UTF-8"> 
     <title>Setup</title> 
    </head> 

    <body> 
     <div id = "app"></div> 
     <script src = "main.js"></script> 
    </body> 
</html>

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App2'; 

ReactDOM.render(<App />, document.getElementById('app'))

app2.jsx

import React from 'react'; 
import ReactDom from 'react-dom'; 

class App extends React.Component { 
    render(){ 
    let txt = this.props.txt 
    return <h1>{txt}</h1> 
    } 
} 

App.propTypes = { 
    txt: React.PropTypes.string, 
    cat: React.PropTypes.number.isRequired 
} 

App.defaultProps = { 
    txt: 'this is the default txt' 
} 

ReactDOM render(
    <App cat={5}/>, 
    document.getElementById('app') 
)

的package.json

{ 
    "name": "es6-react-setup", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5" 
    } 
}

请帮忙。

来源

2016-09-18 muzzo

你的意思'ReactDOM.render'？你在使用ES吗？ – Li357

我确实解决了这个问题，但仍然有相同的错误。我正在使用ES5和ES6 – muzzo

为什么不在'main.js'中渲染？你也似乎没有出口任何东西，所以我不知道你在输入什么 – Li357

import是ES6语法。你需要npm install babel-preset-es2015 babel-preset-react --save-dev告诉babel编译你的ES6和React的代码。

你可以在你webpack.config.js文件加载2包：

module.exports = { 
    entry: './main.js', 
    output: { 
    path: './', 
    filename: 'index.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    } 
}

我希望这会帮助你。

来源

2016-09-19 01:12:02

我收到以下错误消息：'module.exports = { ^ SyntaxError：意外的标记。在exports.runInThisContext（vm.js：53：16）在Module._compile（module.js：387：25）在Object.Module._extensions..js（module.js：422：10）在模块.load（module.js：357：32） at Function.Module._load（module。（module.js：367：17） at require（internal/module.js：20：19） at module.exports' – muzzo

此外我已经添加了babel-preset-2015和巴贝尔预设反应 – muzzo

安装ES6和React的Babel预设后，您需要通过创建.babelrc文件或在您的package.json文件中选择启用它们。

文档浏览：http://babeljs.io/docs/usage/babelrc/

来源

2017-08-03 23:44:02 Madbreaks

学习ReactJS：未捕获的SyntaxError：意外的令牌导入

回答

相关问题