Attempted import error: 'isDataViewLike' is not exported from 'vis-data'

[billyz313]

Overview

build fails with error: Failed to compile ./node_modules/react-vis-timeline/node_modules/vis-timeline/esnext/esm/vis-timeline-graph2d.js Attempted import error: 'isDataViewLike' is not exported from 'vis-data/esnext/esm/vis-data.js'.

Package versions

"react-vis-timeline": "^2.0.3", "vis": "^4.21.0-EOL",

Steps to reproduce

I just added the sample code to my project and it fails. I can comment out the code and it builds fine with my other components. Below is the code from the sample that I added. I have removed my components so you can see the offending code. Am I missing an import or package?

Code Snippet

import React from "react";
import Timeline from "react-vis-timeline";

class Sample extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const items = [
      {
        id: 1,
        group: 1,
        start: "2014-04-20",
        end: "2014-04-26",
        content: "Test 1",
      },
      {
        id: 2,
        group: 2,
        start: "2014-04-22",
        end: "2014-04-29",
        content: "Test 2",
      },
    ];

    const groups = [
      {
        id: 1,
        content: "Group 1",
      },
      {
        id: 2,
        content: "Group 2",
      },
    ];

    const options = {
      width: "100%",
      height: "450px",
    };
    return (
      <div>
        <Timeline
          options={options}
          initialItems={items}
          initialGroups={groups}
        />
      </div>
    );
  }
}

export default Sample;

[billyz313]

Upon investigating I see the same issue was reported on the visjs repo https://github.com/visjs/vis-timeline/issues/744 and it looks like in ur package you just have to update the vis-data module.

Also, I have tried the code above, and the exact sample in ur example directory. I have also tried with v2.0.0, v2.0.2, and of course the latest v2.0.3 and the issue exists in each of them.

[setnone]

I'm having the same issue when i try to add the package to my project. Running the example from cloned repo works fine though.

[vjpr]

vis-timeline requires vis-data as a peer.

/xxx/node_modules/.pnpm/[email protected]_9a15a4fd4e2f8fcf87b919d8ec046851/node_modules/vis-timeline/package.json

"peerDependencies": {
  "vis-data": "^6.3.0 || ^7.0.0",
}

But vis-timeline is resolving its peer to 6.6.1 instead of 7.0.0+ which does not contain isDataViewLike.

This is because react-vis-timeline has a dependency of vis-data@^6.5.2 which is being used to satisfy the peer dep.

Workaround

If using pnpm, add to root package.json.

  "pnpm": {
    "overrides": {
      "vis-data": "^7.0.0"
    }
  }

Use resolutions in yarn.

[phifa]

hey, i am just using npm. Any way I can apply this workaround? @vjpr

[yuz302]

Using this package solved the problem for me. https://www.npmjs.com/package/react-vis-timeline-2

[scottmcdonnell]

I cannot get this working for me. I have tried: yarn add react-vis-timeline

yarn add react-vis-timeline-2

yarn add https://github.com/razbensimon/react-vis-timeline.git

yarn add https://github.com/ChadJPetersen/react-vis-timeline.git

I can see vis-data 7.1 is installed:

yarn list --pattern vis-data
yarn list v1.22.19
└─ [email protected]

yarn list --pattern vis-timeline
[email protected]
└─ [email protected]

but I still get the error in my react 17 application:

TypeError: (0 , vis_data_esnext_esm_vis_data_js__WEBPACK_IMPORTED_MODULE_2__.isDataViewLike) is not a function
isDataViewLike
http://localhost:8000/mf-dep____vendor.c6eb21c4.js:878040:91
new Timeline
http://localhost:8000/mf-dep____vendor.c6eb21c4.js:892776:36
Timeline.componentDidMount
http://localhost:8000/mf-dep____vendor.c6eb21c4.js:792845:16

is the current version working?