React-router: 3.0.1 to 3.0.2 causes history to break

[stueynet]

Upon upgrading from 3.0.1 to 3.0.2 I start getting:

ERROR in ./~/react-router/es/createRouterHistory.js
Module parse failed: /node_modules/react-router/es/createRouterHistory.js Cannot read property 'name' of null
You may need an appropriate loader to handle this file type.

Looking at the diff it doesn't seem much changed there so I am having trouble tracking down why all suddenly breaks with this minor change.

Implementation:

import {Router, IndexRoute, Route, browserHistory} from 'react-router';

class RootAll extends Component {

    render() {
        return (
            <Router history={browserHistory}>
                <Route path="/all" component={All}>
                    <Route path="dashboard" component={Dashboard}/>
                    <Route path="profile" component={Profile}/>
                    <Route path="settings" component={Settings}/>
                </Route>
            </Router>
        )
    }

Would be happy to provide any additional info here.

[alisd23]

Looks like adding "module": "es/index" to the package.json causes this. It's one of the only changes from that diff. Removing it fixes the issue for me.

Not sure why this is breaking webpack though :confused:. Am looking into it now.

[amireynoso]

I'm having the same error. However, we didn't upgrade, we were already on 3.0.2 and the builds started failing just today. 🤔

[stueynet]

@amireynoso same. But only when updating npm after removing node_modules. The working build has been using 3.0.2 for months. So some dependency clearly doesn't like this.

[alisd23]

Ok after playing around with the createRouterHistory.js file, it looks like exporting a function with no name causes some error later on - no idea why. naming the function (e.g. to createRouterHistory) fixes it for me.

I noticed other files in the es folder have either named functions or anonymous default functions that are wrapped in expression brackets:

export default (function () {
  // code
})

@stueynet @amireynoso - does your error mention uglifyJS at all? In my situation UglifyJS plugin also throws an error:

ERROR in bundle.0c0eb4459f7efe0e87b0.js from UglifyJs
Expecting UnicodeEscapeSequence -- uXXXX [bundle.0c0eb4459f7efe0e87b0.js:19283,0]

[alisd23]

Never mind it's nothing to do with UglifyJS :man_facepalming:

[stueynet]

@alisd23 when you say naming the function, can you be more specific? Perhaps an example of what to change. Sorry but not 100% sure what you mean there.

[alisd23]

Sorry I was just investigating - writing things down as I saw them.

When "module": "es/index" is set in the react-router package json - webpack will use the es files instead - which has a mix of es6 imports and es5 code.

When webpack parses es/createRouterHistory.js it finds a function with no name - and for some reason it wasn't designed for that situation. I think a simple cheap fix would be to give that anonymous function a name.

If you want to just get it working locally temporarily until a fix can be released just change line 5 of node_modules/react-router/es/createRouterHistory.js to:

export default function createRouterHistory(createHistory) {

Then webpack is fine with it.

[timdorr]

I'll get a 3.0.3 pushed out to fix this soon.

[timdorr]

3.0.3 is pushed. npm install [email protected] will get it.