Redux + karma-webpack - cannot read displayName of undefined upon import of React.Component

Question

I'm using karma-webpack and I am refactoring a React Component to use in multiple places. I moved the component to it's own file, so I can import it and connect it differently by applying mapStateToProps / mapDispatchToProps in the HOC I later include on my page.

Here's the scenario:

EventTable - imports EventTableComponent, exports connected / wrapped component MyEventTable - imports EventTableComponent, exports connected / wrapped component EventTableComponent - defines the props / behaviors shared to render the data rows

When I git mv EventTable to EventTableComponent and refactored the code so the connected stuff is in the HOCs, the tests start failing to import EventTableComponent only in karma-webpack. Chrome works just fine and the view render perfectly. QA is happy, or would be, but my build fails.

The build is failing because WrappedComponent is undefined for the EventTable and MyEventTable components, which causes connect to throw the message in the synopsis (cannot read displayName of undefined), but I don't even import either of these files into my test! Instead, it fails while karma webpack is building, but before running any tests.

I fixed the build locally by destroying the view and making a "fake" / "replacement" like this:

function EventTableComponent () { 
    return (<div>garbage here</div>);
}

The build passes.

The most confusing part in all of this? I don't even test the HOC at all. I import just the EventTableComponent into the test, but karma-webpack, as suggested in the Redux Documentation.

I've written a minimal example gist to illustrate: https://gist.github.com/zedd45/cbc981e385dc33d6920d7fcb55e7a3e0

Wout Mertens (from Webpack Gitter) suggested replacing the imports with require. This caused the tests to pass, but the imports stopped working in the app, so the Component was not rendered. — zedd45
– zedd45, Commented Aug 25, 2016 at 22:09

Community · Accepted Answer · 2017-05-23 12:13:46Z

0

I was able to solve this by tricking the module system.

// EventTableComponentWrapper.jsx

import EventTableComponent from './EventTableComponent';

if (process.env.NODE_ENV === 'test') {
    module.exports = require('./EventTableComponent.test.jsx');
} else {
    module.exports = EventTableComponent;
}

I import this file in both HOC Components, and based on my environment variable, I get the right one, and Karma Webpack is tricked into not exploding.

I arrived at this conclusion based on a few leads, but credit goes to this SO Post: Conditional build based on environment using Webpack

and also to Wout Mertens from the Webpack Gitter channel for tipping me off to the issue being ES6 Class Import / Export related.

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Aug 26, 2016 at 14:28

zedd45

2,1911 gold badge32 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zedd45 Over a year ago

This is still hacky, and I've love a better solution

Collectives™ on Stack Overflow

Redux + karma-webpack - cannot read displayName of undefined upon import of React.Component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related