TypeError: Cannot read property 'split' of null

[seungha-kim]

It seems that if there is no root route '/' in route definition, then above error occurs.

[TylorS]

Are you able to provide some kind of test case? I've never encountered this before

[seungha-kim]

Sure! this is my main function.

import xs from 'xstream'
import {run} from '@cycle/xstream-run'
import {makeDOMDriver} from '@cycle/dom'
import {makeRouterDriver} from 'cyclic-router'
import {createHistory} from 'history'
import {html} from 'snabbdom-jsx'

function main(sources) {
  const {DOM, router} = sources
  const routedSink$ = router.define({
    '/1': sources => ({
      DOM: xs.of(
        <div>Home</div>
      )
    }),
    '/2': sources => ({
      DOM: xs.of(
        <div>About</div>
      )
    })
  }).map(({path, value: Component}) => Component({
    ...sources,
    router: router.path(path)
  }))

  const dom$ = routedSink$.map(s => s.DOM).flatten()

  return {
    DOM: dom$,
    router: xs.of('/1')
  }
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  router: makeRouterDriver(createHistory())
};

run(main, drivers);

and the exact error message is here:

[seungha-kim]

package.json here :

{
  ...
  "dependencies": {
    "@cycle/dom": "^10.0.4",
    "@cycle/isolate": "^1.4.0",
    "@cycle/xstream-run": "^3.0.3",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "css-loader": "^0.23.1",
    "cyclic-router": "^2.1.2",
    "debug": "^2.2.0",
    "history": "^3.0.0",
    "install": "^0.8.1",
    "node-sass": "^3.8.0",
    "npm": "^3.10.3",
    "sass-loader": "^4.0.0",
    "snabbdom-jsx": "^0.3.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "xstream": "^5.0.6"
  },
  "devDependencies": {
    "babel-register": "^6.9.0",
    "eslint": "^3.0.0",
    "ignore-styles": "^4.0.0",
    "nodemon": "^1.9.2",
    "tap-notify": "^1.0.0",
    "tape": "^4.6.0",
    "webpack-dev-server": "^1.14.1"
  }
}

[TylorS]

Great, thank you. I'll dig into the issue this week

[ghost]

Any news on this issue?

[godbasin]

Same with this issues.
In the meantime, when I mapTo() a new router url, it seems doesn't work.

Here's my code:

import xs from 'xstream';
import { run } from '@cycle/run';
import { makeDOMDriver } from '@cycle/dom';
import { html } from 'snabbdom-jsx';

export function LoginComponent(sources) {
    const domSource = sources.DOM;
    const loginClick$ = domSource.select(".submit").events("click");
    const loginView$ = xs.merge(unameInput$, pwdInput$).map(res => 
         <div>
            <form>
                  <div>
                        <button class="btn btn-default submit">Login</button>
                  </div>
            </form>
        </div>
    );
    return {
        DOM: loginView$,
        router: loginClick$.mapTo("app"),
    };
}

And my main function is like this:

import {run} from '@cycle/run'
import xs from 'xstream';
import {makeDOMDriver} from '@cycle/dom';
import {makeRouterDriver} from 'cyclic-router';
import {createBrowserHistory} from 'history';
import switchPath from 'switch-path';  // Required in v3, not required in v2 or below 
import {AppComponent} from './app'
import {LoginComponent} from './login'

function main(sources) {
  const match$ = sources.router.define({
    '/': LoginComponent,
    '/app': AppComponent,
  });
  
  const page$ = match$.map(({path, value}) => {
    return value(Object.assign({}, sources, {
      router: sources.router.path(path)
    }));
  });
  
  return {
    DOM: page$.map(c => c.DOM).flatten(),
    router: xs.of('/'),
  };
}

run(main, {
  DOM: makeDOMDriver('#app'),
  router: makeRouterDriver(createBrowserHistory(), switchPath)  // v3
});

Also another question: How can I use hashHistory in my router?
Is this would work: use createHashHistory instead of createBrowserHistory?

import {createHashHistory} from 'history';

And it also cause warning:

browser.js:49 Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

Many thanks!

[ntilwalli]

1. You should provide a root route for now, since no one has gotten around to fixing this bug yet...
2. You're mapping to "app" when your route is for "/app", does adding a slash fix it?
3. createHashHistory should work and that's a warning, not an error. It's just saying if you try to push the same path, the hashHistory object disregards it...