Webpack意外的令牌语法错误

我试图设置一个基本的Web应用程序使用react & redux以及webpack。目前的情况是我刚刚放在一起的基本框架，但运行构建似乎总是导致以下错误：Webpack意外的令牌语法错误

ERROR in ./app/views/index.js 
Module build failed: SyntaxError: /Users/username/Dropbox/Web Development/my-website/app/views/index.js: Unexpected token (1:7) 
export Wrapper from './wrapper'; 
export Home from './home'; 
export Apps from './apps'; 
    at Parser.pp.raise (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:1378:13) 
    at Parser.pp.unexpected (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:2817:8) 
    at Parser.pp.expect (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:2811:33) 
    at Parser.pp.parseExportSpecifiers (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:2637:8) 
    at Parser.pp.parseExport (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:2570:28) 
    at Parser.parseExport (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:3569:20) 
    at Parser.pp.parseStatement (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:1852:90) 
    at Parser.parseStatement (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:3507:22) 
    at Parser.pp.parseBlockBody (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:2208:21) 
    at Parser.pp.parseTopLevel (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:1747:8) 
    at Parser.parse (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:1349:17) 
    at Object.parse (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:45:50) 
    at File.parse (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/lib/transformation/file/index.js:479:24) 
    at File.parseCode (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/lib/transformation/file/index.js:568:20) 
    at /Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/lib/transformation/pipeline.js:48:12 
    at File.wrap (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/lib/transformation/file/index.js:528:16) 
    at Pipeline.transform (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/lib/transformation/pipeline.js:46:17) 
    at transpile (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-loader/index.js:14:22) 
    at Object.module.exports (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-loader/index.js:88:12) 
@ ./app/index.js 23:13-31

至于我可以告诉一切似乎都在JavaScript正确有效这就是文件它的抱怨：

./app/views/index.js

export Wrapper from './wrapper'; 
export Home from './home';

./app/views/wrapper.js

个

import React from 'react'; 

class Wrapper extends React.Component { 
    render() { 
     return(
      <div> 
       <h3>Wrapper</h3> 
      </div> 
     ); 
    } 
}

./app/views/home.js

import React from 'react'; 

class Home extends React.Component { 
    render() { 
     return(
      <div> 
       <h3>Home</h3> 
      </div> 
     ); 
    } 
}

./app/index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore, combineReducers } from 'redux'; 
import { Provider } from 'react-redux'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 
import { syncHistoryWithStore } from 'react-router-redux'; 

import reducer from './reducers'; 
import { Wrapper, Home } from './views'; 

const store = createStore(reducer); 
const history = syncHistoryWithStore(browserHistory, store) 

React.render(
    <Provider store={store}> 
     <div> 
      <Router history={history}> 
       <Route path="/" component={Wrapper}> 
        <IndexRoute component={Home}/> 
       </Route> 
      </Router> 
     </div> 
    </Provider>, 
    document.getElementById('mount') 
);

在配置方面我有以下几点：

package.json个

{ 
    // ... 

    "dependencies": { 
    "react": "^0.14.8", 
    "react-dom": "^0.14.8", 
    "react-redux": "^4.4.1", 
    "react-router": "^2.0.1", 
    "react-router-redux": "^4.0.1", 
    "redux": "^3.3.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.7.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "webpack": "^1.12.14", 
    "webpack-dev-server": "^1.14.1" 
    } 
}

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    entry: [ 
    'webpack/hot/only-dev-server', 
     path.resolve(__dirname, 'app/index.js') 
    ], 
    output: { 
     path: path.resolve(__dirname, 'public'), 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: "babel", query: {presets:['react','es2015']}} 
     ] 
    }, 
    plugins: [ 
     new webpack.NoErrorsPlugin() 
    ] 
};

我完全的错误难倒。如果有人对我出错的地方有任何想法，请告诉我。谢谢！

来源

2016-04-03 The Crazy Chimp

没有你的JS文件都在做出口（默认或其它）：

执行以下操作：

在./app/views/wrapper.js：

export default Wrapper;

In ./app/views/home.js：

export default Home;

虽然我并不需要这个包装文件（尽管我明白你在这里想达到什么目的！），但仍然如你所愿。

然后替换./app/views/index。JS为：

import Wrapper from './wrapper'; 
import Home from './home'; 
export Wrapper; 
export Home;

来源

2016-04-03 14:38:59 activatedgeek

我想你的意思，在./app/views/index.js做的是import你Wrapper和Home的意见，而不是使用export关键字。

来源

2016-04-03 14:31:50

我看到一个小错误，可能会造成一个问题：你的方法React.render(里面应用程序/ index.js可能会更改为ReactDOM.render(

我刚才说这个作为评论，但我目前没有评论的声望。无论如何，希望它有帮助:-)

来源

2017-05-10 23:44:48 Lionel

Webpack意外的令牌语法错误

回答

相关问题