-
Notifications
You must be signed in to change notification settings - Fork 199
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
trackExtraHooks cannot set property of #<Object> which has only a getter #85
Comments
try using |
Codesandbox edited |
what version of webpack do you use? |
I'm using CRA so it is managed internally. |
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>
.
|
All latest |
|
Sadly, webpack produces immutable objects when compiles es imports and exports.
|
How are we able to fix this without ejecting the webpack config? |
I believe theres no way to do it with CRA alone at the moment. You can use: To add alias to webpack as mentioned above. |
In my Webpack config, I included the UMD build by doing: alias: {
'react-redux': isDevelopment ? 'react-redux/dist/react-redux.js' : 'react-redux/lib',
}, The const User: React.FunctionComponent = React.memo(() => {
const s = useSelector(state => ({ auth: { userId: state.auth?.userId } }));
return <div>{s.auth?.userId}</div>;
}); My settings: whyDidYouRender(React, {
trackExtraHooks: [[require('react-redux'), 'useSelector']],
}); Nothing ever gets logged in the console. What am I doing wrong? |
the library only tracks the re-renders (including re-renders as a result of hook changes) on selected components. you are missing the tracking of the "User" component. to do so, add:
or you can set the library to track all pure components:
|
My apologies. I did have import { useSelector as useSelector_ } from 'react-redux';
export const useSelector: <T>(selector: (state: State) => T, equalityFn?: (left: T, right: T) => boolean) => T = useSelector_; The purpose of doing that is having your I imagine the solution for that is the same as before — importing a mutable object instead of (immutable) ECMAScript module. However, this could evolve badly if more and more modules receive special treatment from Webpack configuration. Do you think it would be possible to have an API that accepts a reference to the augmented hook? import * as hooks from "whatever";
whyDidYouRender(React, {
trackAllPureComponents: true,
trackExtraHooks: [hooks.useSelector],
}); ECMAScript module objects are immutable, but their constituent members are not. This could allow us to have the best of two worlds — run |
it's not possible as far as i know.
|
I'm using CRA, and I managed to get around it by doing:
|
but then you probably need to use |
Interesting, actually I didn't change any of that, not sure how it worked then ! |
Do you see did you try:
|
here is an example of how it works in practise: notice when clicking on "same value" how there's a "why did you render" log in sandbox's console. now, the sandbox uses react-redux/lib for some reason, but im not sure what's going on under the hood there... |
it's work. |
I can confirm that only setting the package alias to
For people using [
'use-rewire',
(config, NODE_ENV) => {
config.resolve.alias = {
...config.resolve.alias,
'react-redux': NODE_ENV === 'development' ?
'react-redux/dist/react-redux.js' : 'react-redux/lib',
};
return config;
}
] |
I did eventually get it working after some Webpack configuration changes. Unfortunately I'm not sure what change made the difference. |
More info is required to help with it. |
It doesn't seem possible to track react-router hooks on their dev & dev-experimental branches. I created an issue: remix-run/react-router#7646 |
So I got a reply from @timdorr who basically said that it should work with The But it still doesn't work. import React from "react";
if (process.env.NODE_ENV === "development") {
const whyDidYouRender = require("@welldone-software/why-did-you-render");
whyDidYouRender(React, {
trackAllPureComponents: true, // useState, useEffect ...
trackExtraHooks: [
[require("@apollo/client/react/hooks/hooks.cjs"), "useReactiveVar"],
[require("react-i18next/dist/commonjs/useTranslation"), "useTranslation"],
[require("react-router-dom/main"), "useLocation"], // <= Cannot set property useLocation of #<Object> which has only a getter
}); When I try to debug that, I can confirm that if (process.env.NODE_ENV === "development") {
const reactRouterDom = require("react-router-dom/main");
console.log(reactRouterDom.useLocation);
const whyDidYouRender = require("@welldone-software/why-did-you-render");
whyDidYouRender(React, {
trackExtraHooks: [
[reactRouterDom, "useLocation"],
],
}); @vzaidman any idea how to solve this ? |
maybe but i wouldn't track "useLocation". it sounds like a waste of time to me to be honest. also, the way you import it here, should be the same way you import it everywhere in the project, so make sure to use "alias" or something. |
I tried doing this with |
Reproduces for us when we tried to upgrade from Webpack4 to Webpack5 while on TS 4.1 and ES6. |
Has anybody gotten this to work with |
Hey am using CRA, where I should add this wdyr.js: It will be very kindfull if you guide me. |
please look at this comment: |
I have already followed this #154 But I need to track useSelector. For that I tried Then I follwed this issue and updated wdyr.js according to above mentioned solutions: Then I read this https://github.com/welldone-software/why-did-you-render/issues/85#issuecomment-605322912 If you have any other solutions let me know. Am struggling around it from 4-5 days. |
@nikitaNaredi please use ``` for code blocks so it will be more readable. for example:
|
|
Thanks @vzaidman but still no luck, I have installed and created a craco.config.js. And added the code of https://github.com/welldone-software/why-did-you-render/issues/154#issuecomment-773905769 And craco.congif.js
|
I got this error when I mistakenly used default export for a named export component.
instead of
|
Hey all, I got a similar error when trying to use why-did-you-render 7.0.1 with React Native 0.71.6 and react-redux 8.0.5:
Fortunately, it's possible to fix it with the following two patches:
diff --git a/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js b/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js
index fabd293..0d6a323 100644
--- a/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js
+++ b/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js
@@ -5,8 +5,9 @@ var WDYR = require('@welldone-software/why-did-you-render')
var origJsxDev = jsxDevRuntime.jsxDEV
var wdyrStore = WDYR.wdyrStore
-module.exports = jsxDevRuntime
-module.exports.jsxDEV = function jsxDEV(){
+module.exports = {
+ ...jsxDevRuntime,
+ jsxDEV: function jsxDEV(){
var args = Array.prototype.slice.call(arguments)
if(wdyrStore.React && wdyrStore.React.isWDYR){
@@ -35,4 +36,4 @@ module.exports.jsxDEV = function jsxDEV(){
}
return origJsxDev.apply(null, args)
-}
+}}
diff --git a/node_modules/react-redux/lib/exports.js b/node_modules/react-redux/lib/exports.js
index 4235b88..a2065c5 100644
--- a/node_modules/react-redux/lib/exports.js
+++ b/node_modules/react-redux/lib/exports.js
@@ -49,6 +49,9 @@ Object.defineProperty(exports, "useSelector", {
enumerable: true,
get: function () {
return _useSelector.useSelector;
+ },
+ set: function (value) {
+ _useSelector.useSelector = value;
}
});
Object.defineProperty(exports, "createSelectorHook", {
diff --git a/node_modules/react-redux/lib/index.js b/node_modules/react-redux/lib/index.js
index 07dcece..e8f176f 100644
--- a/node_modules/react-redux/lib/index.js
+++ b/node_modules/react-redux/lib/index.js
@@ -33,6 +33,9 @@ Object.keys(_exports).forEach(function (key) {
enumerable: true,
get: function () {
return _exports[key];
+ },
+ set: function (value) {
+ _exports[key] = value;
}
});
}); Here are my files:
import React from 'react';
if (__DEV__) {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
const ReactRedux = require('react-redux');
whyDidYouRender(React, {
trackAllPureComponents: true,
logOnDifferentValues: true,
trackExtraHooks: [[ReactRedux, 'useSelector']],
});
}
module.exports = {
presets: [
[
'module:metro-react-native-babel-preset',
{ useTransformReactJSXExperimental: true },
],
[
'@babel/preset-react',
{
importSource: '@welldone-software/why-did-you-render',
runtime: 'automatic',
development: true,
},
],
],
plugins: ['react-native-reanimated/plugin'],
}; |
I have the exactly same as @tomekzaw , is there a solution for it? |
Hey @chmiiller, have you tried the solution from my comment? It worked for me back then. You need to modify 2 files:
|
yes, I've tried that and it works @tomekzaw , thanks for that! I'm just saying that maybe this patch on |
exports.js doesn't exist @tomekzaw |
The UMD build was removed in https://redux.js.org/usage/migrations/migrating-rtk-2#dropping-umd-builds |
I had stumbled here getting the same message but without using any hooks, seems that my configuration was wrong (as our project had been using an old react version prior to the upgrade) - import * as React from 'react';
+ import React from 'react';
if (process.env.NODE_ENV === 'development') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
trackAllPureComponents: false,
});
} |
was that enough for you to fix it on |
Is there any solution for this? |
By specifying
trackExtraHooks
, the following error is thrown.NOTE: The error is only thrown when running in local machine, NOT in codesandbox.
Reproduction link:
The text was updated successfully, but these errors were encountered: