Uncaught TypeError: cx is not a function in FelaTheme

[filipmares]

Hi,

I'm trying to setup the Quick Start sample code and getting the runtime error below in the console. It looks to be related to the classnames import.

I've uploaded my source here in case i'm doing something totally wrong.

Any help getting up and running is greatly appreciated. Thanks!

renderComponent.js:94 Uncaught TypeError: cx is not a function
    at Object.render (renderComponent.js:94)
    at FelaTheme.render (FelaThemeFactory.js:49)
    at finishClassComponent (react-dom.development.js:14301)
    at updateClassComponent (react-dom.development.js:14264)
    at beginWork (react-dom.development.js:15082)
    at performUnitOfWork (react-dom.development.js:17820)
    at workLoop (react-dom.development.js:17860)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
react-dom.development.js:15749 The above error occurred in the <FelaTheme> component:
    in FelaTheme (created by Button)
    in Button
    in Unknown
    in ThemeProvider (created by FelaTheme)
    in Provider (created by FelaTheme)
    in FelaTheme (created by ProviderConsumer)
    in ProviderConsumer (created by Provider)
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:15749
react-dom.development.js:18807 Uncaught TypeError: cx is not a function
    at Object.render (renderComponent.js:94)
    at FelaTheme.render (FelaThemeFactory.js:49)
    at finishClassComponent (react-dom.development.js:14301)
    at updateClassComponent (react-dom.development.js:14264)
    at beginWork (react-dom.development.js:15082)
    at performUnitOfWork (react-dom.development.js:17820)
    at workLoop (react-dom.development.js:17860)
    at renderRoot (react-dom.development.js:17946)
    at performWorkOnRoot (react-dom.development.js:18837)
    at performWork (react-dom.development.js:18749)

[miroslavstastny]

The problem is the different result between webpack and parceljs in handling following import:

import * as cx from 'classnames'

In webpack cx ends up being a function, in parceljs it is an object with default property being that function:

Not sure if it is a problem in (a) the import statement, (b) classnames package or (c) parceljs.

[filipmares]

@miroslavstastny You're right! Switch to webpack and it seems to resolve. I will update the repo. Thanks!

[layershifter]

@filipmares FYI: we fixed this in #570 👍