模块构建失败: SyntaxError:在laravel (gulp+webpack+babel)中使用react时意外的字符“@”
模块构建失败: SyntaxError:在laravel (gulp+webpack+babel)中使用react时意外的字符“@”
提问于 2016-11-30 21:41:09
在Laravel5.3中尝试使用react dnd (https://github.com/gaearon/react-dnd)
我将单个目标示例(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 ] } }如何修复此错误？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-30 21:41:09
修正了将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更改为以下代码(此cod将呈现<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不要忘记在布局/app.blde.php中倾向于index.js。
<script src="/js/singleTarget/index.js"></script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40898742
复制相关文章
相似问题
腾讯云开发者
