trackExtraHooks cannot set property of #<Object> which has only a getter

[mwskwong]

By specifying trackExtraHooks, the following error is thrown.
NOTE: The error is only thrown when running in local machine, NOT in codesandbox.

Reproduction link:

whyDidYouRender.js:167 Uncaught TypeError: Cannot set property useSelector of #<Object> which has only a getter
    at whyDidYouRender.js:167
    at Array.forEach (<anonymous>)
    at zn (whyDidYouRender.js:150)
    at Module../src/index.js (index.js:9)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.1 (styles.css?f684:43)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
(anonymous) @ whyDidYouRender.js:167
zn @ whyDidYouRender.js:150
./src/index.js @ index.js:9
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
1 @ styles.css?f684:43
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

[vzaidman]

try using import * as ReactRedux from 'react-redux' instead.

[mwskwong]

try using import * as ReactRedux from 'react-redux' instead.

Codesandbox edited
Same result

[vzaidman]

I think it has to do with your transpiler (probably babel).
put a breakpoint before running WDYR.

see if React is there, WDYR is there and also there's a "useSelector" in React Redux

[mwskwong]

It seems that React, WDYR and useSelector all exists. It's just the fact that the compiler thinks WDYR is trying to set a getter-only property.

[vzaidman]

what version of webpack do you use?

[mwskwong]

I'm using CRA so it is managed internally.

[vzaidman]

same version as in the sandbox?

…

On Fri, Jan 31, 2020 at 11:09 AM matthewkwong2 ***@***.***> wrote: I'm using CRA, and does NOT eject so it is managed internally. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#85?email_source=notifications&email_token=ABHSW25Z3T3J4WLJ7HYHQL3RAPTCZA5CNFSM4KOCOXJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKN765A#issuecomment-580648820>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABHSW2YEJRMYXHANE2Q46LTRAPTCZANCNFSM4KOCOXJQ> .

[mwskwong]

All latest

[mwskwong]

   "@welldone-software/why-did-you-render": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-redux": "latest",
    "react-scripts": "latest",
    "redux": "latest"

[vzaidman]

Sadly, webpack produces immutable objects when compiles es imports and exports.
Currently, the only way to make it work is to use the "umd" version of the library being exported. At least in development:

    resolve: {
      alias: {
        'react-redux': process.env.NODE_ENV === 'development' ? 'react-redux/lib' : 'react-redux'
      }
    }

[DalderupMaurice]

How are we able to fix this without ejecting the webpack config?
I am unable to use the library as intended with this issue and IMO it shouldn't be low priority/wontfix at all as a lot of people use CRA and will probably experience the same issue.