Module parse failed, unexpected token with Webpack

Question

I'm trying to build a React app using some simple methods of building views and components. When I run my webpack dev server I get the following error output:

Module parse failed: /Directory/To/router.js Unexpected token (26:2)

You may need an appropriate loader to handle this file type.

The line it complains about is when I first define my Router handler... <Route handler={App}>

My full router.js is set as such:

// 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 my .babelrc file I have my presets defined with react and es2015

My development webpack looks like this:

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

I've already tried to research this problem. I'm not finding any solutions to this specific instance. I'm curious to find why this is acting like this.

Edit 1

I managed to solve my problem by changing the directory name to my actual source directory and not in public/ . But after correcting my mistake I stumbled upon two other errors dealing with my components, perhaps?

I now receive two errors in the browser: 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)

I've found that this is commonly caused by not importing/exporting some things correctly. It's either coming from my router.js or my components that share their structure as below:

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

You are exporting Uploader as default but importing it as a named export:

export default Uploader;

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

Your Router configuration is a bit strange. What version of react-router are you using? Usually you can wrap your <Route> config into a <Router> . See the docs .

Module parse failed, unexpected token with Webpack

Question

Edit 1

1 answers

solution1
0 2016-06-20 22:04:17

Module parse failed, unexpected token with Webpack

Question

Edit 1

1 answers

solution1 0 2016-06-20 22:04:17

solution1
0 2016-06-20 22:04:17