간단한보기 및 구성 요소 작성 방법을 사용하여 React 앱을 작성하려고합니다. 내 웹팩 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'));
});
내 .babelrc 파일이 내가 가진 내 사전 설정 react 및 es2015
내 개발 웹팩 정의는 다음과 같습니다
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'
}
]
}
};
이미이 문제를 연구하기 위해 시도했습니다. 이 특정 인스턴스에 대한 솔루션을 찾지 못했습니다. 나는 이것이 왜 이런 행동을하는지 궁금해.
편집 한 내가 public/ 내 실제 소스 디렉토리에 디렉토리 이름을 변경하고하지 않음으로써 내 문제를 해결하기 위해 관리
. 하지만 내 실수를 바로 잡은 후에 구성 요소를 다루는 다른 두 가지 오류가 발생했을 가능성이 높습니다.
는 이제 브라우저에서 두 가지 오류가 나타날 수 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