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

Question

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

3

我是ReactJS的新手。我正在尝试egghead.io上的代码，但一直得到以下错误：

Uncaught SyntaxError: Unexpected token import

我已经加载了两次babel，并按照课程描述进行了操作，但它仍然无法加载到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"
  }
}

Please help.

- muzzo

你是指 ReactDOM.render 吗？你正在使用 ES 吗？ - Andrew Li

我已经修复了，但仍然出现相同的错误。而且我正在使用ES5和ES6。 - muzzo

这只是课程的进展而已。我把它改变之前的状态恢复了回来。 - muzzo

@Ben Hare：试过了。还是出现了意外的Token导入错误。 - muzzo

@PhiNguyen: 我找不到.babelrc文件。 - muzzo

显示剩余5条评论

2个回答

0

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']
        }
      }
    ]
  }
}

我希望它能对你有所帮助。

- Phi Nguyen

我收到了以下错误：' module.exports = { ^语法错误：意外的标记。在exports.runInThisContext (vm.js:53:16) 在Module._compile (module.js:387:25) 在Object.Module._extensions..js (module.js:422:10) 在Module.load (module.js:357:32) 在Function.Module._load (module.js:314:12) 在Module.require (module.js:367:17) 在require (internal/module.js:20:19) 在module.exports ' - muzzo

我已经添加了babel-preset-2015和babel-preset-react。 - muzzo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Madbreaks · Accepted Answer

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

这里是（令人困惑的）文档链接：http://babeljs.io/docs/usage/babelrc/ 以下是启用预设的package.json示例条目：

"babel": {
    "presets": [
        [
          "env",
          {
            "modules": false
          }
        ],
        "react"
    ]
}