-
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
How to use in CRA(5.0.0) React17.0.1 #231
Comments
The discussion on CRA 4 is here: #154. |
I really appreciate it 😀 |
+1 |
1 similar comment
+1 |
+1 |
This works for react-scripts@5.0.0, react-app-rewired@2.2.1, and customize-cra@1.0.0.
|
@LyulyaevMaxim, Hi! i'm trying to reproduce your example, but my attempt was unsuccessful. Could you please show me where i made a mistake? Here is codesandbox link |
The welldone-software/why-did-you-render@7.0.1 really does not support react 17 and 18. You can check it with official sandbox Updating react version to 17.0.0 or 18.0.0 in file package.json breaks wdyr functionality |
This has to do with how the sandbox is implemented rather than the library's support. |
I came here because I couldn't run wdyr on my project. I copied the contents of the sandbox files into my project and it didn't work in my environment. I am using react 18.1.0 Maybe I'm doing something wrong. However, I can't run the sandboxed example locally. |
please follow the installation instructions in the readme closely rather than how it works in the sandbox. |
Using React 18(.2) I managed to make it work the following way (the way described here didn't work for me, got errors when starting with
(basicaly, craco install from their doc)
module.exports = {
babel: {
loaderOptions: (babelLoaderOptions) => {
// Look up if we find the proper settings
const origBabelPresetReactAppIndex = babelLoaderOptions.presets.findIndex(preset => {
return preset[0].includes('babel-preset-react-app\\index.js')
});
if (origBabelPresetReactAppIndex === -1) {
return babelLoaderOptions;
}
let origBabelPresetReactApp = babelLoaderOptions.presets[origBabelPresetReactAppIndex][1];
// if this is not set to automatic, no change
if(origBabelPresetReactApp.runtime !== "automatic") return babelLoaderOptions;
// Add the required options
origBabelPresetReactApp = {
...origBabelPresetReactApp,
development: process.env.NODE_ENV === 'development',
importSource: '@welldone-software/why-did-you-render',
}
babelLoaderOptions.presets[origBabelPresetReactAppIndex][1] = origBabelPresetReactApp;
return babelLoaderOptions;
}
},
};
import React from 'react';
if (process.env.NODE_ENV === 'development') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
trackAllPureComponents: true,
// any other option you require
});
}
import './wdyr'; // just that line, don't touch anything else from that file
import './index.css';
import React from 'react';
// ...
root.render(/* your app component */);
reportWebVitals();
npm run craco-start This is close to what @LyulyaevMaxim did in his comment. Now that I did it on my own I understand what he was suggesting, but according to their documentation, react-app-rewired only supports CRA 2.0 and customize-cra also. I hope it will help fellows lazy developpers who don't want to read documentation and just copy/paste something that works (at least for me). |
I had to add |
I tried a lot of ways,but it dosen't show any information in console. I don't know what's wrong.
The text was updated successfully, but these errors were encountered: