Cannot read property 'listen' of undefined

[rizkiandrianto]

Seems like this.context.router is undefined in RouterLink. using react-router 2.6.1 and react-router-dom 4.1.1

[alpertuna]

Hi @rizkiandrianto, I didn't encounter with this issue. Can you send me a brief code example causes this problem?

[rizkiandrianto]

Hi @alpertuna , Here's my code:

import React from 'react'
import { Link } from 'react-router'
import { DASHBOARD } from '../../config/routes.alias';
import MetisMenu from 'react-metismenu';
import RouterLink from 'react-metismenu-router-link';

const content=[
  {
    label: 'Dashboard',
    to: DASHBOARD
  },
  {
    label: 'Builder',
    content: [
      {
        icon: 'icon-class-name',
        label: 'New Campaign',
        to: '#another-link',
      },
      {
        icon: 'icon-class-name',
        label: 'Campaign Setting',
        to: '#another-link',
      },
      {
        icon: 'icon-class-name',
        label: 'KPI Settings',
        to: '#another-link',
      },
    ],
  },
  {
    label: 'Management',
    content: [
      {
        icon: 'icon-class-name',
        label: 'QS/Pos Distribution',
        to: '#another-link',
      },
      {
        icon: 'icon-class-name',
        label: 'Keyword Suggestion Tool',
        to: '#another-link',
      },
      {
        icon: 'icon-class-name',
        label: 'Ads Bulk Editor',
        to: '#another-link',
      },
      {
        icon: 'icon-class-name',
        label: 'Ads Bulk Scheduler',
        to: '#another-link',
      },
    ],
  },
  {
    label: 'History',
    content: [
        {
            icon: 'icon-class-name',
            label: 'Notifications',
            to: '#another-link',
        },
    ],
  }
];

function LeftNavigation(props) {
  return (
      <aside class={`menu leftNav ${props.active ? 'active' : ''}`} id="leftNav">
          <MetisMenu content={content} activeLinkFromLocation iconNameStateHidden="angle-left" iconNameStateVisible="angle-left rotate-minus-90" LinkComponent={RouterLink}/>
          <a class="button button-help">
              <span>Help</span>
              <span class="icon is-small">
        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
        </span>
          </a>
      </aside>
  )
}

export default LeftNavigation 

and here's my package.json

{
  "name": "simple-react-boilerplate",
  "version": "1.0.0",
  "description": "just another react boilerplate",
  "main": "app.js",
  "scripts": {
    "dev": "node server",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "prod": "cross-env NODE_ENV=production node server",
    "test": "mocha app/**/test.js"
  },
  "keywords": [
    "react",
    "boilerplate",
    "simple"
  ],
  "author": "miftakribo",
  "license": "UNLICENSED",
  "dependencies": {
    "axios": "^0.16.2",
    "bulma": "^0.4.3",
    "cssmin": "^0.4.3",
    "express": "^4.15.3",
    "express-minify": "^0.2.0",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "node-sass": "^4.5.3",
    "react": "15.3.0",
    "react-breadcrumbs": "^1.6.6",
    "react-datepicker": "^0.47.0",
    "react-dom": "15.3.0",
    "react-highcharts": "^12.0.0",
    "react-metismenu": "^1.3.1",
    "react-metismenu-router-link": "^2.0.1",
    "react-redux": "^5.0.5",
    "react-router": "2.6.1",
    "react-router-redux": "^4.0.8",
    "react-select": "^1.0.0-rc.5",
    "redux": "^3.7.1",
    "redux-form": "^6.8.0",
    "redux-promise-middleware": "^4.3.0",
    "redux-thunk": "^2.2.0",
    "sass-loader": "^6.0.6"
  },
  "devDependencies": {
    "babel-core": "6.11.4",
    "babel-eslint": "^7.2.3",
    "babel-loader": "6.2.4",
    "babel-plugin-react-html-attrs": "2.0.0",
    "babel-plugin-react-transform": "2.0.2",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-preset-es2015": "6.9.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-stage-0": "6.5.0",
    "cross-env": "3.0.0",
    "css-loader": "0.23.1",
    "duplicate-package-checker-webpack-plugin": "^1.2.4",
    "enzyme": "^2.9.1",
    "eslint": "^3.19.0",
    "eslint-loader": "^1.8.0",
    "eslint-plugin-jsx-a11y": "^5.1.0",
    "eslint-plugin-react": "^7.0.1",
    "expect": "^1.20.2",
    "file-loader": "0.9.0",
    "html-webpack-plugin": "2.23.0",
    "ignore-styles": "^5.0.1",
    "mocha": "^3.4.2",
    "path": "0.12.7",
    "react-addons-test-utils": "15.3.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "redux-devtools-extension": "^2.13.2",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.5.0"
  }
}

also by default it's not include the react-router-dom depedencies, so I have UNMET PEER DEPENDENCY of react-router-dom and react-router, did you have hany sugestion.

[alpertuna]

Sorry, I didnt realize that your react-router version is 2.6.1 that is old. react-metismenu-router-link v2 is for react-router v4. In this case you should migrate your react-router to v4, or downgrade react-metismenu-router-link to ^1.0.2

[rizkiandrianto]

Oh I see, thanks for figure it out. I think you need to mention this case in documentation of this package :)

[alpertuna]

You're welcome. And thanks for reminder about documention. Apparently I should document it.