私はReactアプリケーションを、ビルドの簡単な方法を使ってビルドしようとしています。私は私のWebPACKのdevのサーバーを実行すると、私は次のようなエラー出力を取得：Webpackでモジュールの解析に失敗した、予期しないトークン
Module parse failed: /Directory/To/router.js Unexpected token (26:2)
You may need an appropriate loader to handle this file type.
それは文句を言う私が最初に私のルータハンドラを定義する場合であるラインを... <Route handler={App}>
私の完全なrouter.jsは次のように設定されています：
// Load css first thing. It gets injected in the <head> in a <style> element by
// the Webpack style-loader.
import css from './src/styles/main.sass';
import React from 'react';
import { render } from 'react-dom';
// Assign React to Window so the Chrome React Dev Tools will work.
window.React = React;
import { Router } from 'react-router';
Route = Router.Route;
// Require route components.
import { App } from './containers/App';
import { Home } from './containers/Home';
import { StyleGuide } from './containers/StyleGuide';
import { Uploader } from './containers/Uploader';
const routes = (
<Route handler={App}>
<Route name="Home" handler={Home} path="/" />
<Route name="StyleGuide" handler={StyleGuide} path="/styleguide" />
<Route name="Uploader" handler={Uploader} path="/uploader" />
</Route>
)
Router.run(routes, function(Handler) {
return ReactDOM.render(<Handler/>, document.getElementById('app'));
});
In私はすでにこの問題を研究しようとした
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
'./src/router'
],
devtool: 'eval',
debug: true,
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolveLoader: {
modulesDirectories: ['node_modules']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'public')
},
// CSS
{
test: /\.sass$/,
include: path.join(__dirname, 'public'),
loader: 'style-loader!css-loader!sass-loader'
}
]
}
};
：私は私のプリセットは私の開発のWebPACKは、次のようになりますreactとes2015
で定義されている私の.babelrcファイル。私はこの特定のインスタンスに対する解決策を見つけることはできません。なぜこれがこのように機能しているのか、私は興味があります。
編集1私はpublic/に私の実際のソースディレクトリにディレクトリ名を変更しないで、私の問題を解決するために管理
。しかし、私の間違いを訂正した後、おそらく私のコンポーネントを扱っている他の2つのエラーに遭遇しましたか？
は、私は今のブラウザで2つのエラーを受け取る： Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
TypeError: _reactRouter.Router.run is not a function. (In '_reactRouter.Router.run', '_reactRouter.Router.run' is undefined)
は、私は、これは一般的に正しくいくつかのことをエクスポート/インポートしないことによって引き起こされていることがわかりました。あなたがデフォルトとしてアップローダをエクスポートするが、名前の輸出としてそれをインポートしている
import React from 'react';
import { Link } from 'react-router';
const Uploader = React.createClass({
//displayName: 'Uploader',
render() {
return (
<div>
<h1>Uploader</h1>
</div>
)
}
});
export default Uploader;
'router.js'ファイルは' public/'ディレクトリにありますか？公共もあなたの出力のようです。 – Herku
@Herkuはい私はこの質問を投稿した直後にこれを理解することができました！しかし、ディレクトリを変更した後で私の質問が更新されました。なぜなら、それは私に奇妙なエラーを与えているからです。 – privateer35