Incompatible with React 16 beta

[gartz]

The following error crashes the app when using React 16 beta.

React caught an error thrown by Provider. You should fix this error in your code. Consider adding an error boundary to your tree to customize error handling behavior. See https://fb.me/react-error-boundaries for more information.

Error: null

The error is located at: 
    in Provider

The error was thrown at:

Other error messages that might be relevant:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

invariant.js?c115:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

By removing react-redux or downgrading to React 15.x it works correctly.

[gaearon]

Can you provide a minimal project reproducing this?

[timdorr]

I get similar errors here: https://codesandbox.io/s/jvX5PQol That can serve as a good starting point.

[jimbolla]

@timdorr Your errors go away if you give Provider or App a store: https://codesandbox.io/s/nZXwy0l57

It does seem though in the case where connect doesn't find a store, that the console does get a lot of noise. I wonder if react-redux could provide a better DX when targeting react 16.

[timdorr]

Should Provider or connect provide an error boundary? I haven't read too much into cDC, but I assume we can re-throw errors that we don't want to handle (e.g., errors from within the wrapped component).

[gaearon]

Error: null looks odd. I wonder if this is because it’s in CodeSandbox. Can you reproduce the same error locally?

[gaearon]

cc @acdlite, maybe we need feature test after all? This is very confusing.

[gaearon]

Should Provider or connect provide an error boundary?

No, I don’t think so.

[gartz]

@jimbolla in my case I have the store in the provider. It still display's the error.

[gaearon]

@gartz Please provide a minimal project reproducing the issue that isn’t hosted in an online editor. Thank you!

[gartz]

@gaearon I will work on that by the end of the day, I will need to remove some proprietary stuff from the project I'm using to test this and try to isolate the error.

[gaearon]

Thanks!

[timdorr]

Error: null looks odd. I wonder if this is because it’s in CodeSandbox. Can you reproduce the same error locally?

Looks like it. Here's what I get in a fresh CRA app:

React caught an error thrown by Connect(BaseApp). You should fix this error in your code. Consider adding an error boundary to your tree to customize error handling behavior. See https://fb.me/react-error-boundaries for more information.

Invariant Violation: Could not find "store" in either the context or props of "Connect(BaseApp)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(BaseApp)".

The error is located at: 
    in Connect(BaseApp) (at index.js:15)
    in Provider (at index.js:14)

[timdorr]

I'm guessing because CodeSandbox runs in an iframe and is shipped code/data externally, it doesn't have the right security context to access the error object or stack trace.

[sebmarkbage]

@gaearon FWIW the feature test wouldn't cover this case. AFAIK we don't have a good way to detect that some part of the code is from a different origin than another. Either Chrome fixes https://bugs.chromium.org/p/chromium/issues/detail?id=701371 or we can force use of Break On Caught Exceptions for debugging which is not great neither.