编辑1

Question

我正在尝试使用一些构建视图和组件的简单方法来构建React应用程序。当我运行我的webpack dev服务器时，我得到以下错误输出：

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

我已经尝试过研究这个问题了。我找不到这个特定实例的任何解决方案。我很想知道为什么会这样。

编辑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;

Answer 1

您正在导出Uploader作为默认值，但将其导入为命名导出：

export default Uploader;

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

您的路由器配置有点奇怪。您使用的是什么版本的react-router？通常，您可以将<Route>配置包装到<Router>中。请参阅docs。

模块解析失败，Webpack出现意外令牌

编辑1

1 个答案: