0

react&reduxとともに.を使用して、基本的な Web アプリをセットアップしようとしています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