爲什麼試圖導入反應時支架'{'是一個意外的標記？

我想使用Facebook的固定數據表模塊，只要按照此頁面上的基本的例子： https://facebook.github.io/fixed-data-table/爲什麼試圖導入反應時支架'{'是一個意外的標記？

不過，我收到以下錯誤，當我嘗試使用的WebPack捆綁我的文件使用'故宮運行督促」，運行 '新公共管理的WebPack -p'：

SyntaxError: Unexpected token: punc ({) [./app/index.js:1,0]

這是唯一一個在index.js行：

import {Table, Column, Cell} from 'fixed-data-table';

這是我的package.json文件的樣子：

{ 
    "name": "datatables", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "prod": "webpack -p", 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "fixed-data-table": "^0.6.3", 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.5", 
    "babel-preset-react": "^6.11.1", 
    "css-loader": "^0.23.1", 
    "html-webpack-plugin": "^2.22.0", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.15.0" 
    } 
}

我只是試圖讓基本示例代碼工作。謝謝。

編輯：添加的WebPack：

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 
var CssWebpack = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/fixed-data-table.css', 
    filename: 'fixed-data-table.css', 
    inject: 'head' 
}); 

module.exports = { 
    entry: ['./app/index.js'], 
    output: { 
     path: __dirname + '/dist', 
     filename: "index_bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, 
      { test: /\.css$/, loader: "style-loader!css-loader" } 
     ] 
    }, 
    plugins: [HtmlWebpackPluginConfig] 
}

來源

2016-08-22 austin

什麼是您的節點版本？ – ceejayoz

'node -v'返回'v6.4.0'，'npm -v'返回'3.10.3' – austin

您的代碼中是否有import語句？我不記得'babel-preset-react'是否足夠..你可能需要其他預設，比如'stage-3'或者某些特定的導入。你可以發佈你的webpack配置文件嗎？ – azium

節點目前不支持import語句。只需要將預設添加到您的webpack加載程序配置中，並且它將正確運輸

npm install babel-preset-es2015 babel-preset-react 

module: { 
    loaders: [ 
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader", 
      presets: ["es2015", "react"] 
     }, 
     { test: /\.css$/, loader: "style-loader!css-loader" } 
    ] 
},

來源

2016-08-22 21:19:05

我想我的.babelrc文件中沒有「es2015」，但添加完成後好吧（我沒有把它作爲預設添加到webpack中）。感謝您指出es2015！ – austin

爲什麼試圖導入反應時支架'{'是一個意外的標記？

回答

相關問題