Uncaught TypeError: Cannot read property 'inline-0' of undefined

I am running into this error on v0.20.5 when trying to use the connect functionality, following the example in the docs.

Uncaught TypeError: Cannot read property 'inline-0' of undefined

Importing a logic from a separate file and applying it in its entirety to a component works fine. However, trying to connect specific actions or props to a component fails. I’ve tried connecting using a decorator, with the shorthand syntax (connect(options)), and with the long syntax (kea({ connect: { ... } }), but i get the same error in all cases.

I am able to reproduce this in a simple Gist. Is there a step that i’m missing to make connect() work or is this a bug in kea? I noticed that there has been some recent development activity, so maybe the docs are just outdated.

Please let me know if there is anything you need me to clarify about what is happening. Thanks!

Edit: Here’s the full stack trace.

selectors.js:6 Uncaught TypeError: Cannot read property 'inline-0' of undefined
    at concat.reduce (selectors.js:6)
    at Array.reduce (<anonymous>)
    at pathSelector (selectors.js:6)
    at rootSelector (selectors.js:22)
    at index.js:86
    at Object.reducer1 (index.js:36)
    at Object.keys.forEach.propKey (kea.js:317)
    at Array.forEach (<anonymous>)
    at kea.js:316
    at Object.runComponentSelector [as run] (connectAdvanced.js:26)
    at Connect.initSelector (connectAdvanced.js:178)
    at new Connect (connectAdvanced.js:119)
    at ReactCompositeComponent.js:294
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:293)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:143)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at Object._renderNewRootComponent (ReactMount.js:319)
    at Object._renderSubtreeIntoContainer (ReactMount.js:401)
    at Object.render (ReactMount.js:422)
    at Object../src/index.js (index.js:79)
    at __webpack_require__ (bootstrap 7abea5da1d167805669e:659)
    at fn (bootstrap 7abea5da1d167805669e:85)
    at Object.0 (index.js:80)
    at __webpack_require__ (bootstrap 7abea5da1d167805669e:659)
    at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 7abea5da1d167805669e:708)
    at bundle.js:712

[patrick-jones]

I believe you could use the esnext: src/index.js property in package.json to point at the untranspiled source. Here’s an article that explains it: http://2ality.com/2017/06/pkg-esnext.html

The good thing about the approach used in the article (as I understand it) is that the library consumer has to opt in to using the untranspiled code. People who don’t care will get the default, transpiled behavior.

Personally I would much prefer to transpile kea myself, as it is nearly impossible to debug kea-related errors if you have to deal with the regeneratorRuntime code. The only way I was able to debug #32 was to clone the repo, yarn link to it and change the main entry in package.json to point to src/index.js

[mariusandra]

Hey, great to hear that it works! I wanted to write a longer reply yesterday, but couldn’t due to time and device constraints.

There was something that changed between 0.20.5 and 0.20.6 which might feel like a breaking change and perhaps I didn’t manage in the best way. What happened was that from 0.19.12 to 0.20.5, I had added a module field in package.json pointing to the untranspiled ES6+ source of the library. I thought this was the right way to do it, but it resulted in various bugs with bundling your app. In short, this left kea completely untranspiled, and when you opened your app in a non-latest-chrome browser, everything broke, as almost nobody re-transpiles what comes to them through node_modules.

What other libraries, like redux-saga do, is to still transpile your app to ES5 for the paths that are referenced with module, but keep the import statements so that webpack 2+, rollup, etc can properly do tree shaking on them. I will add this change when I release v0.21.

That said, in reality the change between 0.20.5 and 0.20.6 means that you just got the bug sooner. You would probably have gotten the same thing when you would have written any code that uses sagas.

I’ll keep the issue open until I have time to see what I can do with the error and update the documentation about redux-saga needing babel-polyfill.

Thanks for your patience! 😃