0

我正在尝试使用react&redux以及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')
);

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

包.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()
    ]
};

我完全被这个错误难住了。如果有人对我哪里出错有任何想法，请告诉我。谢谢！

4

3 回答 3

1

您的所有 JS 文件都没有进行导出（默认或其他）：

请执行下列操作：

在./app/views/wrapper.js：

export default Wrapper;

在./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-03T14:38:59.010 回答
0

我看到一个可能导致问题的小错误：您React.render(在app/index.js中的方法可能更改为ReactDOM.render(

我只是将其添加为评论，但我目前没有评论的声誉。无论如何希望它是有帮助的:-)

于 2017-05-10T23:44:48.297 回答
0

我认为您在 ./app/views/index.js 中的意思是import您的Wrapper和Home视图，而不是使用export关键字。

于 2016-04-03T14:31:50.787 回答