react-redux Provider error

[voletiswaroop]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: 18.2.0
• ReactDOM/React Native:
• Redux: 4.2.1
• React Redux: 8.1.1

What is the current behavior?

Im using React, React Redux, and Redux (not using toolkit) all are in latest versions.

import { Provider } from "react-redux";

Trying to run the application on Chrome 38 and encountering below error:
Error in - Check the render method of Provider. react-redux

PFA for the reference.

It was working as expected with below versions
React Redux 7.2.6
React: 17.0.2
Redux: 4.1.2

What is the expected behavior?

Should work seamlessly without any errors.

Which browser and OS are affected by this issue?

Chrome 38

Did this work in previous versions of React Redux?

• Yes

[EskiMojo14]

Could you post the section of JSX where you use the Provider too?

[voletiswaroop]

Could you post the section of JSX where you use the Provider too?

Im exploring on new react app
PFA for the reference

[phryneas]

Are you really working with a Chrome version from 2014 here?
https://chromereleases.googleblog.com/2014/10/stable-channel-update-for-chrome-os.html

[voletiswaroop]

Are you really working with a Chrome version from 2014 here? https://chromereleases.googleblog.com/2014/10/stable-channel-update-for-chrome-os.html

I am building an app and that has to support on old TVs.

[phryneas]

And is this error only occuring in that old browser, or also in newer ones?
Generally, your code seems okay, but that error message is something we've never seen before in that context - and your targeted browser is older than Redux itself, so first thing is that we should make sure if it's really the browser version that plays a role here.

[voletiswaroop]

And is this error only occuring in that old browser, or also in newer ones? Generally, your code seems okay, but that error message is something we've never seen before in that context - and your targeted browser is older than Redux itself, so first thing is that we should make sure if it's really the browser version that plays a role here.

This works as expected in Chrome 53.0.2785.34 and also working in older version of React Redux 7.2.6

[phryneas]

Could you test if this version resolves it?

# yarn 1
yarn add https://pkg.csb.dev/reduxjs/react-redux/commit/b95e01e6/react-redux
# yarn 2, 3
yarn add react-redux@https://pkg.csb.dev/reduxjs/react-redux/commit/b95e01e6/react-redux/_pkg.tgz
# npm
npm i https://pkg.csb.dev/reduxjs/react-redux/commit/b95e01e6/react-redux

[GorlikItsMe]

I have the same issue.

The problem is Redux uses Proxy
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/proxy

And is not supported in your chrome version
https://caniuse.com/?search=proxy

You can try use this:
https://www.npmjs.com/package/es6-proxy-polyfill
(but for me it still dont work)

My 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, or you might have mixed up default and named imports.

Check the render method of `Provider`.
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, or you might have mixed up default and named imports.

Check the render method of `Provider`.
    at createFiberFromTypeAndProps (<anonymous>:42858:21)
    at createFiberFromElement (<anonymous>:42879:19)
    at reconcileSingleElement (<anonymous>:31907:27)
    at reconcileChildFibers (<anonymous>:31957:39)
    at reconcileChildren (<anonymous>:35692:32)
    at mountIndeterminateComponent (<anonymous>:36566:9)
    at beginWork (<anonymous>:37787:20)
    at HTMLUnknownElement.callCallback (<anonymous>:22087:18)
    at Object.invokeGuardedCallbackDev (<anonymous>:22131:20)
    at invokeGuardedCallback (<anonymous>:22188:35)

[GorlikItsMe]

babel/babel#71 (comment)

It's impossible to polyfill Proxy because of the limitations of ES5.

This polyfill from above comment is not enough for redux.
You should try use older version of redux but I dont know what version

[phryneas]

@GorlikItsMe and that version I mentioned above also fixes it?

[phryneas]

This should be solved in v8.1.2.

[GaganZee]

@phryneas
Can we have a list of Proxy methods/features being used in react-redux v8.1.2 ??
This can help us in finding a better polyfill for Proxy for lower versions of browsers like Chrome 38.

@GorlikItsMe Did you find any Polyfill that works?

[GorlikItsMe]

I replaced redux with zustand. I was starting a new project so the change wasn't difficult because I didn't manage to do anything important

[phryneas]

There is no Proxy in there anymore.

Honestly, it's very frustrating if I even put out a version for you to try that you completely ignore (just as the changelog that mentions that the Proxy was removed).

[GaganZee]

@phryneas
Proxy was a concern for me to support Chrome 38 on old TVs.

Thanks for this release.

[GorlikItsMe]

Hi again, I tested your release and all works correct!
I had to add this polyfills:

import "react-app-polyfill/ie9";
import "core-js/features/array/find";
import "core-js/features/array/includes";
import "core-js/features/number/is-nan";
import "core-js/features/object/get-own-property-descriptors";
import "core-js/features/object";

window.globalThis = window;

But I don't know which ones exactly are needed only for redux (I use different libraries and unfortunately I don't know which one needed what imports)

Thx for your work @phryneas, I didnt expected someone will fix this issue that quick (Its new for me, most of the time I wait months).
Again thanks ❤️

[GaganZee]

Hi @phryneas
I see this similar import error during running jest unit tests with the same setup,

Test suite failed to run

TypeError: (0 , _useSelector.initializeUseSelector) is not a function

> 1 | import { useDispatch, useSelector } from "react-redux";
    | ^
  2 | import type { TypedUseSelectorHook } from "react-redux";
  3 |
  4 | import type { AppReduxStateType } from "types/common";

  at Object.<anonymous> (node_modules/react-redux/lib/index.js:42:40)
  at Object.<anonymous> (src/js/redux/hooks.ts:1:1)

My hooks.ts file
import { useDispatch, useSelector } from "react-redux";
import type { TypedUseSelectorHook } from "react-redux";

  import type { AppReduxStateType } from "types/common";
  import { store } from "./store";
  
  // Infer the `AppDispatch` types from the store itself
  type AppDispatch = typeof store.dispatch;
  
  // Use throughout your app instead of plain `useDispatch` and `useSelector`
  export const useAppDispatch: () => AppDispatch = useDispatch;
  export const useAppSelector: TypedUseSelectorHook<AppReduxStateType> =
useSelector;

[markerikson]

@GaganZee : that doesn't look like it has anything to do with this issue. Can you provide a repo that demonstrates this happening, or record a Replay ( https://replay.io/record-bugs ) ?

[GaganZee]

Hi @markerikson
This error seems to be coming from node_modules/react-redux/lib/index.js whenever we import { useDispatch, useSelector } from "react-redux";

Will this help ?

[markerikson]

@GaganZee : whatever you're seeing is probably not related to this Github issue. Can you open a new issue and provide a repo that shows this error happening?