Importing css causes obscure error in browserify

Overview

When I attempt to import react-visjs-timeline and then transform my source with browserify, it says “Error runing browserify Unexpected token undefined”.

Package versions

react-visjs-timeline: 1.4.0 vis version: 4.21.0 browserify version: 13.3.0

Steps to reproduce

1. Extract the files from the attached archive.
2. npm install
3. npm install -g gulp if not already installed
4. gulp

Code Snippet

Output

$ gulp
[15:14:01] Using gulpfile ~/test/gulp/gulpfile.js
[15:14:01] Starting 'default'...
[15:14:01] Starting 'browserify'...
[15:14:01] Finished 'browserify' after 1.2 ms
[15:14:01] Finished 'default' after 2.39 ms

events.js:163
      throw er; // Unhandled 'error' event
      ^
SyntaxError: Unexpected token

If I remove the require(... .css) line from node_modules/react-visjs-timeline/build/index.js, then the output is what I expect.

$ gulp
[15:16:38] Using gulpfile ~/test/gulp/gulpfile.js
[15:16:38] Starting 'default'...
[15:16:38] Starting 'browserify'...
[15:16:38] Finished 'browserify' after 1.23 ms
[15:16:38] Finished 'default' after 2.19 ms
Ran browserify and wrote output

I am using browserify-css which seems like it should handle the import of css, but it is clearly not doing that.

reproduce.zip

[educastellano]

I think the CSS should be imported outside the component, so the user can import it in whatever bundler is using, i.e.:

import Timeline from 'react-visjs-timeline'
import 'vis/dist/vis.min.css'

ReactDOM.render(
  <Timeline />,
  document.getElementById('root')
);

[zoeesilcock]

@educastellano I agree that the component should not contain a require to the CSS file from the vis package. It makes the assumption that the build environment knows how to handle CSS requires inside of node_modules. I would very much prefer having a way to import just the component without the CSS so I can handle that in what would be a suitable way for my project.

@jdehaan Did you find a solution when using Webpack? I’ve tried in all sorts of ways, but I can’t get Webpack to handle the fact that it’s trying to require the CSS when doing server side rendering. I get the feeling that this is by design as npm packages are supposed to be self contained and not require this type of transformation.