Skip to content

Can't get styling to work inside existing app #31

@bramroelandts

Description

@bramroelandts

Description

I'm using this library inside an existing project, but I can't get it to work properly for some reason. The package installs correctly, I can import it and create a Timeline. Only problem is that the timeline is just white space, it does not seem to load any CSS.

The only workaround I have found so far, is to manually import the vis stylesheet inside JSX code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet"></link>
If I add this line, it all works properly, the timeline displays and works correctly.

However, this is a hack and does not work when there's no internet access, which is a problem. What could cause this problem? The example project works absolutely fine, so I am lost as to why this doesn't work in my project.

A related issue: vis-timeline inside web component.
This post asks about using the timeline inside a component and the workaround is mentioned. The post is working with Angular though, so I don't know if the diagnosis is valid for ReactJS, too.

Any pointers would be greatly appreciated, I have been stuck on this issue for quite a while now. It must somehow be specific to my project, but I can't figure out why. I recently started from a fresh create-react-app, but still no luck.

Package versions

react-visjs-timeline: 2.0.3
react version: 17.0.2
webpack version: 4.44.2

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions