Я пытаюсь создать приложение 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')); 
    });

В мой файл .babelrc У меня есть мои пресеты определены с react и es2015

Моего WebPack развития выглядит следующим образом:

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' 
    } 
    ] 
    } 
};

Я уже пытался исследовать эту проблему. Я не нахожу никаких решений для этого конкретного экземпляра. Мне любопытно узнать, почему это так.

Edit 1

мне удалось решить мою проблему, изменив имя каталога для моего фактического исходного каталога, а не в 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)

Я обнаружил, что это обычно вызывается не импортировать/экспортировать некоторые вещи правильно. Это либо исходя из моих router.js или моих компонентов, которые разделяют их структуру, как показано ниже:

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;

источник

2016-06-20 privateer35

Является ли ваш файл 'router.js' в каталоге' public/'? Публика также, кажется, ваша выходная директория. – Herku

@Herku Да, мне удалось понять это сразу после того, как я разместил этот вопрос! Но я обновил свой вопрос после изменения каталога, потому что он дает мне некоторые странные ошибки. – privateer35

Вы экспортируемого Uploader по умолчанию, но импортировать его в качестве имени экспорта:

export default Uploader; 

import { Uploader } from './containers/Uploader'; 
// instead do 
import Uploader from './containers/Uploader';

конфигурации Маршрутизатор немного странный. Какую версию вы используете react-router? Обычно вы можете обернуть конфигурацию <Route> в <Router>. См. docs.

источник

2016-06-20 22:04:17 Herku

Я использую версию 2.4.0, и я согласен. Оглянувшись немного, я вижу, как другие люди реализуют его иначе, чем то, что я делаю. – privateer35

Ошибка синтаксического анализа пара, неожиданный токен с помощью Webpack

Edit 1

ответ

Смежные вопросы