Comments (1)
This works for me:
- Create a file
scripts/why-did-you-render/index.js
:
const path = require('path');
/** @typedef {Parameters<import('next').NextConfig['webpack']>[1]} WebpackConfigContext */
const injectionSource = path.join(__dirname, 'injection.ts');
/**
* @param {import('webpack').Configuration} config
* @param {WebpackConfigContext} context
*/
module.exports = (config, context) => {
if (context.dev && !context.isServer) {
const originalEntry = config.entry;
config.entry = async () => {
const entries = await originalEntry();
if (entries['main-app'] && !entries['main-app'].includes(injectionSource)) {
entries['main-app'].unshift(injectionSource);
}
return entries;
};
}
};
Here, instead of entries['main.js']
(which is used for the pages
folder), entries['main-app']
is used (which is required for the app
folder).
- Create a file
scripts/why-did-you-render/injection.ts
(you could also call itinjection.js
if you don't use TypeScript, and change it in the code above).
import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';
// eslint-disable-next-line no-console -- Show information that `whyDidYouRender` has been applied to the website.
console.debug('Applying whyDidYouRender, to help you locate unnecessary re-renders during development. See https://github.com/welldone-software/why-did-you-render');
// See https://github.com/welldone-software/why-did-you-render#options
whyDidYouRender(React, {
trackAllPureComponents: true,
trackHooks: true,
logOwnerReasons: true,
collapseGroups: true,
include: [/./],
// This is for testing, remove it, if you don't want to log on different values
logOnDifferentValues: true
});
In your next.config.js
add:
const injectWhyDidYouRender = require('./scripts/why-did-you-render');
/** @type {import('next').NextConfig} */
module.exports = {
...
webpack: (config, context) => {
injectWhyDidYouRender(config, context)
return config;
}
};
The include: [/./]
in the whyDidYouRender options is a workaround for a bug, which seems to be in
why-did-you-render/src/shouldTrack.js
Lines 39 to 47 in 0f364e8
from why-did-you-render.
Related Issues (20)
- dom npm
- wdyr not work in next13 (repo provided) HOT 2
- wdyr not work in next13 (repo provided)
- WDYR includes full lodash library with window._ override HOT 6
- Cannot get WDYR output from nextjs dynamically loaded component (e.g. for no-ssr use case) HOT 2
- Project still being actively maintained? HOT 2
- Multiple React roots
- why-did-you-render + React Query
- No logs or anything about WDYR HOT 8
- Missing `ownerDataMap` in `notifier`
- Partially Working with React 18 + NextJS 13
- "Support for defaultProps will be removed" error after setting include: [/./] option HOT 8
- Tracking custom hooks issue HOT 2
- WhyDidYouRender is not working in Storybook.js
- Property 'React' doesn't exist HOT 1
- react-refresh-webpack-plugin not updating component when wrapped with React.memo.
- `trackAllPureComponents: true` is not working HOT 1
- Next.js example is missing
- Links from the Credits section are broken HOT 1
- wyd support to react 19 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from why-did-you-render.