Question

您好我收到以下错误以及我尝试的内容我可以在我的设置中找到错误（使用来自https://github.com/coryhouse/react-slingshot的反应样本）我的错误：

    // Create client
    mGoogleApiClient = new GoogleApiClient.Builder(mContext)
        .addApi(Drive.API)
        .addScope(Drive.SCOPE_FILE)
        .addConnectionCallbacks(this)
        .addOnConnectionFailedListener(this)
        .build();

   // handling results after uploading
   final DriveOperationResult<Metadata> driveOperationResultHandler = new DriveOperationResult<Metadata>() {

    @Override
    public void onDriveOperationSucceeded(Metadata result) {
        try {
            // Successfully fetched metadata
            onSuccess(driveId,
                      result.getOriginalFilename(),
                      result.getWebContentLink(),
                      result.getWebViewLink(),
                      result.getAlternateLink(),
                      result.getEmbedLink());
        } finally {
            mGoogleDriveClient.disconnectAsync();
        }
    }

我的WebPack配置：

ERROR in ./src/index.js
Module parse failed: c:\temp\react-slingshot\src\index.js Unexpected token (13:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:2)
    at Parser.pp.raise (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.unexpected (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:1483:8)
    at Parser.pp.parseExprAtom (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:330:12)
    at Parser.pp.parseExprSubscripts (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:225:19)
    at Parser.pp.parseMaybeUnary (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:204:17)
    at Parser.pp.parseExprOps (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:151:19)
    at Parser.pp.parseMaybeConditional (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:133:19)
    at Parser.pp.parseMaybeAssign (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:110:19)
    at Parser.pp.parseExprList (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:657:23)
    at Parser.pp.parseSubscripts (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:249:29)
 @ multi main

我的package.json

resolved by Chrome when they're parsed from a dynamically loaded CSS blob. Note: Only necessary in Dev.
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin(GLOBALS), // Tells React to build in prod mode. https://facebook.github.io/react/downloads.htmlnew webpack.HotModuleReplacementPlugin());
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel'],query: {
          presets: ['es2015']
        }},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
      {test: /\.(woff|woff2)$/, loader: 'file-loader?prefix=font/&limit=5000'},
      {test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
      {test: /\.(jpe?g|png|gif)$/i, loaders: ['file']},
      {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
      {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
    ]
  }
};

我的代码index.js：

...
  "devDependencies": {
    "babel-cli": "6.8.0",
    "babel-core": "^6.7.*",
    "babel-loader": "^6.2.*",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "^6.6.*",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.5.0",
    "babel-register": "6.8.0",
    "browser-sync": "2.12.5",
   ...
    "webpack": "^1.12.*",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },

Answer 1

难道你没有忘记在babel预设中添加'react'吗？

presets: ['es2015']

到

presets: ['react', 'es2015']

别忘了安装它

npm install --save-dev babel-preset-react

Answer 2

Provider（第13：2行）的调用看起来有问题，这是您第一次引用其中一个导入的模块。

尝试：

- 将此行添加到JS加载器中的webpack配置中（与include处于同一级别）

exclude: /node_modules/

- 强行删除节点模块并重新安装，以确保它们没有损坏：

$ rm -rf node_modules

$ npm install

React：您可能需要一个合适的加载器来处理此文件

2 个答案: