Solvedredux api middleware Uncaught TypeError: Cannot read property 'async' of undefined

I'm using npm v3.8.6 and "babel-core": "^6.4.0".

When I or another dev switch back to npm v2.x.x, our app compiles fine. While using npm v3.8.6, however, we get the error named in the subject.

I don't completely understand this behavior, and it may be a "red herring," because you don't have any peerDependencies and that was one of the big breaking changes from 2=>3 in npm. I wonder if it's the folder structure in 3 (flat vs the old "nested" approach)?

My other theory is because we're using babel 6, there is some conflict with the babel 5 / babel runtime.

Here's the (compiled) line in question:

var _regeneratorRuntime = require('babel-runtime/regenerator')['default'];  

The above line is presumably from babel-runtime v5.x.x. The docs for that package on npm / github aren't very helpful :)

Back to the actual issue: the line below fails to evaluate (it results in undefined):

      return _regeneratorRuntime.async(function callee$2$0$(context$3$0) {

This causes my app to halt / crash before even loading my React components, leaving a very broken page. I'm not really sure how to address this, or even entirely sure I understand the underlying issue. Any insight would be much appreciated.

12 Answers

✔️Accepted Answer

None of the work-arounds worked for me.

I tracked it down to the official redux-api-middleware expecting an older version of the babel-runtime where the regenerator and other modules were require()'d with a ['default'].

Instead of trying to fix that, I consulted the network graph https://github.com/agraboso/redux-api-middleware/network on github, and then discovered that aftonbladet's fork works perfectly on my babel6 + webpack2 setup. See https://www.npmjs.com/package/@aftonbladet/redux-api-middleware

You can for example use an alias in your webpack config so that your code doesn't even have to change.

Have fun.

Other Answers:

I got the same. It seems like it has to do with babel-runtime.

I solved it in my project by adding the following in the top of my entrypoint.

const regeneratorRuntime = require('babel-runtime/regenerator');

if (!regeneratorRuntime.default) {
  regeneratorRuntime.default = regeneratorRuntime;
}

I guess that redux-api-middleware needs to be built with babel 6 in order to work properly for babel 6 users.

Version 2 of redux-api-middleware will be built against babel 6 instead of babel 5. Work towards it is on the next branch (including the aforementioned babel upgrade).