模块构建失败：SyntaxError: Unexpected character '@' when using react-dnd in laravel (gulp+webpack+babel)

Question

尝试在 laravel 5.3 中使用 react-dnd (https://github.com/gaearon/react-dnd)

我将 Single Target 示例 (https://github.com/gaearon/react-dnd/tree/master/examples/01%20Dustbin/Single%20Target) 放入 ./public/js/singleTargetsingleTarget/ 文件夹中

这是我的packege.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel": "^5.8.23",
    "babel-cli": "^6.18.0",
    "babel-core": "^5.8.24",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^5.0.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "bootstrap-sass": "^3.3.7",
    "buble": "^0.14.2",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "react": "^15.3.0",
    "react-dnd": "^2.1.4",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dom": "^15.3.0",
    "vue": "^2.0.1",
    "vue-loader": "^9.8.1",
    "vue-resource": "^1.0.3"
  },
  "babel": {
    "stage": 0,
    "loose": [
      "es6.modules",
      "es6.classes"
    ]
  }
}

这是我的 gulfile.js

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(mix => {
    mix.sass('app.scss')
       .webpack('singleTarget/index.js','./public/js/singleTarget')
       ;
});

当运行命令gulp 时，我收到此错误Module build failed: SyntaxError: Unexpected character '@'。这是堆栈跟踪：

const-osx2:gtd const$ gulp
[00:18:41] Using gulpfile ~/Dev/www/gtd/gtd/gulpfile.js
[00:18:41] Starting 'all'...
[00:18:41] Starting 'sass'...
[00:18:43] Finished 'sass' after 1.61 s
[00:18:43] Starting 'webpack'...
{ [Error: ./resources/assets/js/singleTarget/Container.js
Module build failed: SyntaxError: Unexpected character '@' (7:0)
    at Parser.pp$4.raise (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.readToken (/Users/const/Dev/www/gtd/gtd/node_modules/buble/dist/buble.umd.js:682:22)
    at Parser.pp$7.nextToken (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.pp$7.next (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:2413:10)
    at Parser.pp.eat (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:536:12)
    at Parser.pp.semicolon (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:581:15)
    at Parser.pp$1.parseImport (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:1243:10)
    at Parser.pp$1.parseStatement (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:719:46)
 @ ./resources/assets/js/singleTarget/index.js 3:0-36]
  message: './resources/assets/js/singleTarget/Container.js\nModule build failed: SyntaxError: Unexpected character \'@\' (7:0)\n    at Parser.pp$4.raise (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:2221:15)\n    at Parser.pp$7.getTokenFromCode (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:2756:10)\n    at Parser.pp$7.readToken (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:2477:17)\n    at Parser.readToken (/Users/const/Dev/www/gtd/gtd/node_modules/buble/dist/buble.umd.js:682:22)\n    at Parser.pp$7.nextToken (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:2468:15)\n    at Parser.pp$7.next (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:2413:10)\n    at Parser.pp.eat (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:536:12)\n    at Parser.pp.semicolon (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:581:15)\n    at Parser.pp$1.parseImport (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:1243:10)\n    at Parser.pp$1.parseStatement (/Users/const/Dev/www/gtd/gtd/node_modules/acorn/dist/acorn.js:719:46)\n @ ./resources/assets/js/singleTarget/index.js 3:0-36',
  showStack: false,
  showProperties: true,
  plugin: 'webpack-stream',
  __safety: { toString: [Function: bound ] } }

如何解决这个错误？

Answer 1

通过将webpack.config.json 添加到项目的根目录来解决问题。这是webpack.config.json代码：

Elixir.webpack.mergeConfig({
    // babel: {
    //     presets: ['es2015'],
    //     plugins: ['transform-runtime'],
    // },
    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        }, 
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
        }
        ]
    }
});

将 index.js 更改为以下代码（此代码会将 react 应用程序渲染为 <div id="reactTree">,/div>）：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Container from './Container';

export default class DustbinSingleTarget extends Component {
  render() {
    return (
      <div>
        <p>
          <b><a href='https://github.com/gaearon/react-dnd/tree/master/examples/01%20Dustbin/Single%20Target'>Browse the Source</a></b>
        </p>
        <p>
          This is the simplest example there is.
        </p>
        <p>
          Drag the boxes below and drop them into the dustbin.
          Note that it has a neutral, an active and a hovered state.
          The dragged item itself changes opacity while dragged.
        </p>
        <Container />
      </div>
    );
  }
}


ReactDOM.render(
  <DustbinSingleTarget/>,
  document.getElementById("reactTree")
);

这是我的 index.blade.php

@extends('layouts.app')
@section('content')
<div id="reactTree">
<!-- This div's content will be managed by React. -->
</div>
<script src="/js/singleTarget/index.js"></script>
@endsection

不要忘记在 layouts/app.blade.php 中包含 index.js

<script src="/js/singleTarget/index.js"></script>