createBasenameMiddleware - TypeError: Cannot read property 'indexOf' of null

[Tyler Andersen]

So I'm using the createBasenameMiddleware to change the root of all the routes to have /app in front of them since my SPA needs to be in a subdirectory of the PHP site.

I'm setting up the middleware like so:

  const baseNameMiddleware = createBasenameMiddleware({ basename: '/app' });

  const storeEnhancers = [
    createHistoryEnhancer({
      protocol: historyProtocol,
      middlewares: [
        queryMiddleware,
        baseNameMiddleware,
      ],
    }),
    createMatchEnhancer(matcher),
  ];

I keep getting this error with server side rendering:

TypeError: Cannot read property 'indexOf' of null

    at Matcher.isPathnameActive (/path/to/app/node_modules/found/lib/Matcher.js:165:25)
    at Matcher.isActive (/path/to/app/node_modules/found/lib/Matcher.js:81:17)
    at Object.isActive (/path/to/app/node_modules/found/lib/utils/createStoreRouterObject.js:36:22)
    at BaseLink.render (/path/to/app/node_modules/found/lib/BaseLink.js:111:27)
    at /path/to/app/node_modules/react-dom/lib/ReactCompositeComponent.js:796:21
    at measureLifeCyclePerf (/path/to/app/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (/path/to/app/node_modules/react-dom/lib/ReactCompositeComponent.js:795:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (/path/to/app/node_modules/react-dom/lib/ReactCompositeComponent.js:822:32)
    at ReactCompositeComponentWrapper.performInitialMount (/path/to/app/node_modules/react-dom/lib/ReactCompositeComponent.js:362:30)
    at ReactCompositeComponentWrapper.mountComponent (/path/to/app/node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)

I'm guessing that my server routes aren't also adding the /app to them and so they aren't lining up with the Matcher. Any suggestions on how to have the server aligned with the client routes?

[Tyler Andersen]

Hmm looks like I have a couple of places I need to update to make my development environment work with the new base /app path. Will see if that fixes the issue.

[Jimmy Jia]

yeah, right now this will just fail (with pathname set to null in location) if it sees any paths without the basename... not sure if we can do better there

[Tyler Andersen]

Yep, I was needing to fix a lot of relative output paths with webpack and other places. Also helps to actually navigate to localhost:4000/app instead of localhost:4000.

[Tyler Andersen]

Hmm I'm trying to think of an error message that would have been more descriptive of what's happening. Maybe something like "path doesn't match any available configured routes". Also is there a way to make it redirect when it encounters that problem as a catch all?

[Jimmy Jia]

There's not really a place to dispatch an error message. You can install a middleware that listens to UPDATE_LOCATION actions with null pathname and redirect appropriately, though.

[Tyler Andersen]

Ok perfect I'll just do that. Thanks, closing.