Webpack,Babel,React - 意外的令牌导入

时间:2016-10-29 21:44:25

标签: node.js reactjs webpack babeljs

首先 - 我意识到这是许多问题的主题,并且有很多答案,所以我很抱歉另一个!我经历了很多,并确认了我的设置。

我收到此错误:

/Users/justinkruse/react/project/js/App.js:1
(function (exports, require, module, __filename, __dirname) { import React, {Component} from 'react';
                                                              ^^^^^^
*Syntax Error: Unexpected token import*
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

我使用节点v6.9.1,npm 3.10.8

我的package.json看起来像这样:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "app-server.js",
  "dependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-polyfill": "^6.16.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.18.0",
    "cosmicjs": "^2.0.0",
    "events": "^1.1.0",
    "express": "^4.13.3",
    "flux": "^2.1.1",
    "history": "^1.14.0",
    "hogan-express": "^0.5.2",
    "lodash": "^3.10.1",
    "react": "^0.14.1",
    "react-dom": "^0.14.1",
    "react-router": "^1.0.1",
    "webpack": "^1.12.2"
  },
  "scripts": {
    "start": "npm run production",
    "production": "rm -rf public/index.html && NODE_ENV=production webpack -p && NODE_ENV=production node js/App.js",
    "webpack-dev-server": "NODE_ENV=development PORT=8080 webpack-dev-server --content-base public/ --hot --inline --devtool inline-source-map --history-api-fallback",
    "development": "cp views/index.html public/index.html && NODE_ENV=development webpack && npm run webpack-dev-server"
  },
  "author": "Justin",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react-hot-loader": "^1.3.0",
    "webpack-dev-server": "^1.12.1"
  }
}

我的webpack.config.js

var path = require('path');

if(process.env.NODE_ENV === 'development') {
    var loaders = ['react-hot', 'babel'];
} else {
    var loaders = ['babel'];
}

module.exports = {
    devtool: 'eval-source-map',
    entry: ['./js/app-client.js'],
    output: {
        path: __dirname + '/public/dist',
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ["es2015","react"]
            }
        }]
     }
  }

我觉得我必须遗漏一些明显的东西。如果我能提供更多信息,请告诉我。谢谢!

0 个答案:

没有答案