模塊解析失敗，Webpack出現意外令牌

Question

我正在嘗試使用一些構建視圖和組件的簡單方法來構建React應用程序。 當我運行我的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'
    }
    ]
  }
};

我已經嘗試過研究這個問題。 我找不到這個特定實例的任何解決方案。 我很想知道為什么這樣做。

編輯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). 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> 。 查看文檔。

模塊解析失敗，Webpack出現意外令牌

問題描述

編輯1

1 個解決方案

解決方案1
0 2016-06-20 22:04:17

模塊解析失敗，Webpack出現意外令牌

問題描述

編輯1

1 個解決方案

解決方案1 0 2016-06-20 22:04:17

解決方案1
0 2016-06-20 22:04:17