Importing any extra component causes "uhandled error event"

[mewa]

Importing any component
import { AutoComplete } from 'react-mdl-extra';
from react-mdl-extra causes

events.js:141
      throw er; // Unhandled 'error' event

[HriBB]

What version are you using? Which bundler (webpack, rollup, ...)?

For me it works without problems. This is an example AutoComplete component for redux-forms

import React, { PropTypes } from 'react'

import { AutoComplete } from 'react-mdl-extra'

const renderAutoCompleteField = props => {
  const { children, input, meta: { touched, error }, ...other } = props
  const extra = {
    error: touched && error,
  }
  return (
    <AutoComplete floatingLabel {...input} {...other} {...extra}>
      {children}
    </AutoComplete>
  )
}

renderAutoCompleteField.propTypes = {
  dataIndex: PropTypes.string.isRequired,
  input: PropTypes.object.isRequired,
  items: PropTypes.array.isRequired,
  label: PropTypes.string.isRequired,
  meta: PropTypes.object.isRequired,
  valueIndex: PropTypes.string.isRequired,
}

export default renderAutoCompleteField

[ikovic]

Hi, I have the same problem. Here are the possibly relevant npm packages I am using:

babel-preset-es2015@6.22.0
babel-preset-react@6.22.0
babelify@7.3.0
browserify@13.3.0
gulp@3.9.1
react@15.4.2
react-datepicker@0.40.0
react-dom@15.4.2
react-mdl@1.9.0
react-mdl-extra@1.4.3
react-redux@4.4.6
react-router@2.8.1
redux@3.6.0
redux-thunk@2.2.0
vinyl-source-stream@1.1.0
whatwg-fetch@1.1.1

If trying to bundle the source using Browserify, I get the following error:
Unhandled 'error' event
SyntaxError: Unexpected token

[HriBB]

Hmm ... can you please provide some more info? It's hard to tell what's going on ...

[ikovic]

I'm having trouble getting a more verbose error log from Gulp. This is my build task for JS files:

gulp.task('js', function () {
  browserify(paths.JS_MAIN)
    .transform(babelify, {presets: ["es2015", "react"]})
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(paths.JS_BUILD));
});

The error happens if I import any of the MDL extra components.
I'd like to help you with more info, but this is as far as it gets. If I manage to get a better error report, I'll post it.

[HriBB]

I don't use browserify, so I really have no idea what could the problem be. Maybe try to catch some errors in the build process? @mewa are you using browserify as well?

Could be that I'm bundling the package incorrectly.

[ikovic]

Hi, my colleague helped me with getting a more detailed error message from browserify, this is what we came up with:

ParseError
annotated: "/Users/engine/Projects/browserify-test/node_modules/react-mdl-extra/lib/Menu/Menu.css:1.mdl-portalmenu ParseError: Unexpected token"
column: 1
line: 1
message: "Unexpected token"

I don't know if that is going to help you, it's the best we could do for now.

[HriBB]

Thanks, will check it out soon. You are welcome to make a PR 😉

[mewa]

@HriBB Yes, I'm using browserify as well - sorry for not saying it upfront etc., but I'm swarmed with other stuff at the moment ;)