Cannot load application after upgrade from 0.1.1 -> 1.0.1

[jme783]

I receive the following error when loading up my React application when using 1.0.1:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method oft.

I didn't change any of my JSX, simply just upgraded the package. Any help on this would be greatly appreciated.

Thanks

[takempf]

How are you installing the package? Are you compiling your JS into a bundle? If so, how are you doing that?

[jme783]

I ran npm install --save react-simple-dropdown@1.0.1, which overwrites my node_modules version of the library.

[jme783]

And yes, I am compiling my JS into a bundle using browserify. This is done as a gulp task

[takempf]

Are you using babelify? If you console.log(ReactSimpleDropdown), what is its value?

[jme783]

Yes, we are using babelify. Here is the relevant code in the gulpfile.js:

function package(pack) {
    return pack
        .transform(babelify)
        .transform(envify({
            API_BASE_ENDPOINT: determineApiBaseUrl(),
            GIT_BRANCH: process.env.GIT_BRANCH
        }))
        .bundle()
        .on('error', function(err) {
            console.error(err, err.stack);
        })
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(uglify())
        .on('error', gutil.log)
        .pipe(sourcemaps.write('./', { sourceMappingURLPrefix: '/js' }))
        .pipe(gulp.dest('./public/js'));
};

[jme783]

When I console.log ReactDropdown, looks like I get a function:

function (e,r,i){"production"!==n.env.NODE_ENV&&("production"!==n.env.NODE_ENV?S(this instanceof t,"Something is calling a React component directly. Use a factory or JSX instead. See: https://fb.me/re…

[takempf]

Can you include the full stack trace from:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method oft.

What version of React are you using?

[jme783]

n   @   invariant.js:39
o   @   instantiateReactComponent.js:64
r   @   ReactChildReconciler.js:29
s   @   traverseAllChildren.js:98
s   @   traverseAllChildren.js:114
c   @   traverseAllChildren.js:186
u.instantiateChildren   @   ReactChildReconciler.js:52
y.Mixin._reconcilerInstantiateChildren  @   ReactMultiChild.js:197
y.Mixin.mountChildren   @   ReactMultiChild.js:232
_.Mixin._createContentMarkup    @   ReactDOMComponent.js:591
_.Mixin.mountComponent  @   ReactDOMComponent.js:479
o.mountComponent    @   ReactReconciler.js:37
_.mountComponent    @   ReactCompositeComponent.js:225
a   @   ReactPerf.js:66
o.mountComponent    @   ReactReconciler.js:37
y.Mixin.mountChildren   @   ReactMultiChild.js:241
_.Mixin._createContentMarkup    @   ReactDOMComponent.js:591
_.Mixin.mountComponent  @   ReactDOMComponent.js:479
o.mountComponent    @   ReactReconciler.js:37
y.Mixin.mountChildren   @   ReactMultiChild.js:241
_.Mixin._createContentMarkup    @   ReactDOMComponent.js:591
_.Mixin.mountComponent  @   ReactDOMComponent.js:479
o.mountComponent    @   ReactReconciler.js:37
_.mountComponent    @   ReactCompositeComponent.js:225
a   @   ReactPerf.js:66
o.mountComponent    @   ReactReconciler.js:37
y.Mixin.mountChildren   @   ReactMultiChild.js:241
_.Mixin._createContentMarkup    @   ReactDOMComponent.js:591
_.Mixin.mountComponent  @   ReactDOMComponent.js:479
o.mountComponent    @   ReactReconciler.js:37
_.mountComponent    @   ReactCompositeComponent.js:225
a   @   ReactPerf.js:66
o.mountComponent    @   ReactReconciler.js:37
y.Mixin.mountChildren   @   ReactMultiChild.js:241
_.Mixin._createContentMarkup    @   ReactDOMComponent.js:591
_.Mixin.mountComponent  @   ReactDOMComponent.js:479
o.mountComponent    @   ReactReconciler.js:37
_.mountComponent    @   ReactCompositeComponent.js:225
a   @   ReactPerf.js:66
o.mountComponent    @   ReactReconciler.js:37
_.mountComponent    @   ReactCompositeComponent.js:225
a   @   ReactPerf.js:66
o.mountComponent    @   ReactReconciler.js:37
m   @   ReactMount.js:266
i.perform   @   Transaction.js:136
b   @   ReactMount.js:282
i.perform   @   Transaction.js:136
d.batchedUpdates    @   ReactDefaultBatchingStrategy.js:62
o   @   ReactUpdates.js:94
ee._renderNewRootComponent  @   ReactMount.js:476
a   @   ReactPerf.js:66
ee._renderSubtreeIntoContainer  @   ReactMount.js:550
ee.render   @   ReactMount.js:570
a   @   ReactPerf.js:66
r.33../components/SetupApp.react    @   index.js:5
i   @   _prelude.js:1
e   @   _prelude.js:1
(anonymous function)    @   _prelude.js:1

[jme783]

Using React 0.14.3

[takempf]

I'm drawing up blanks here. Aside from the Dropdown component being unable to find DropdownContent and DropdownTrigger, I'm not sure what could be going on. What's going on in index.js (Specifically line 5)?

[jme783]

Bummer. Here's my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import SetupApp from './components/SetupApp.react';

ReactDOM.render(
    <SetupApp />,
    document.getElementById('app')
);

[jme783]

Line 5 is ReactDOM.render(

[jme783]

Would it matter that in our app, we use import instead of require to pull in components?

[takempf]

It might matter under specific circumstances, but not this one. Here are a couple things to try:

• Using require instead of import, especially if this worked in the past
• Removing Dropdown from your application and checking for the error again

[jme783]

With the old version of the library, we used import and it worked just fine. I'll try removing the Dropdown component