Modul Build fehlgeschlagen: Syntaxerror: Unerwartetes Zeichen '@' bei der Verwendung reagieren-dnd in Laravel (schluck + webpack + babel)

Question

Der Versuch, react-dnd zu verwenden (https://github.com/gaearon/react-dnd) in Laravel 5.3

I Einzelziel Beispiel platziert (https://github.com/gaearon/react-dnd/tree/master/examples/01%20Dustbin/Single%20Target) in ./public/js/singleTargetsingleTarget/ Ordner

Hier ist meine 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" 
    ] 
    } 
} 

Hier ist meine 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') 
     ; 
}); 

Beim Ausführen des Befehls gulp erhalte ich diesen Fehler Module build failed: SyntaxError: Unexpected character '@'. Hier ist StackTrace:

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

Wie Sie diesen Fehler beheben?

Answer 1

Behobenes Problem durch Hinzufügen von webpack.config.json zum Stammverzeichnis des Projekts. Hier ist webpack.config.json Code:

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

Changed index.js den folgenden Code (diese Kabeljau wird machen reagieren App <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") 
); 

hier ist mein 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 

Vergessen Sie nicht, index.js in Layouts/app.blade.php zu integrieren.

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