Doesn't work with Vite + React #243

Vexcited · 2022-04-12T16:29:14Z

Hello ! I'm currently having troubles trying to use this library with my React project.

This is my wdyr.ts file:

/// <reference types="@welldone-software/why-did-you-render" />
import React from "react";

export default async function load () {
  if (process.env.NODE_ENV === "development") {
    // Importing because we can't require in Vite.
    const { default: whyDidYouRender } = await import("@welldone-software/why-did-you-render");

    whyDidYouRender(React, {
      trackAllPureComponents: true,
    });
  }
}

This is how I integrate it in my main.tsx (mountpoint)

import wdyr from "./wdyr";
await wdyr();

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <AppRoutingAndMoreRightHere />
  </React.StrictMode>,
  document.getElementById("root")
);

When I run it, there isn't any errors, but still it doesn't work.
I've also tried to add MyComponent.whyDidYouRender = true; but still have no effect.

By the way, I'm using vite 2.7.13 and react 17.0.2.

Hope you can help me with this !

The text was updated successfully, but these errors were encountered:

vzaidman · 2022-04-18T21:33:01Z

Why is this async?
It won't work because it needs to happen in the first thread of the application. Once you make it async, it moves to the next thread.
Try that and tell me if it helps.

Vexcited · 2022-04-18T21:43:18Z

The thing is that even without async it still doesn't work ~

I made here a StackBlitz example with a blank project.
https://stackblitz.com/edit/vitejs-vite-kyrupm?file=src/main.tsx

See main.tsx and wdyr.ts.

jdnarvaez · 2022-04-28T15:52:09Z

I was able to get this working with vite by using the following

wydr.ts

import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';

if (process.env.NODE_ENV === 'development') {
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

main.tsx

import './wdyr';
import React from 'react'
.
.
.

Then setting MyFunctionalComponent.whyDidYouRender = true

Vexcited · 2022-04-28T16:56:32Z

Uhm, I'm sorry but I still can't get it to work with

main.tsx

import './wdyr';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

wdyr.ts

/// <reference types="@welldone-software/why-did-you-render" />
import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';

if (process.env.NODE_ENV === 'development') {
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

App.tsx

function App() {
  return (<div>/** some code */</div>);
}

App.whyDidYouRender = true;
export default App;

There's still nothing in my console

jdnarvaez · 2022-04-28T17:09:47Z

I played around a little bit with your sandbox and I, too, could not get it to work. Might be something with our configs, but what we have setup at my work seems to work with this tool.

Vexcited · 2022-04-28T17:21:13Z

Hope we could find a workaround because I think that this tool can really help me in some of my projects for debugging.

Anyway, I'll try to find more informations on my own about this issue. If I find anything useful, I'll comment it here.

jdnarvaez · 2022-04-28T18:43:34Z

this also seems to work

  const { default: whyDidYouRender } = await import('@welldone-software/why-did-you-render');

  whyDidYouRender(React, {
    logOnDifferentValues: true,
    trackAllPureComponents: true,
  });

for purposes of keeping it a dev dependency. I am not quite sure why it does not work in the example you posted above.

vzaidman · 2022-04-28T20:08:40Z

@jdnarvaez wait so does it works or not? ;O

this also seems to work
I would not expect that anything with "await" would work, because it means that the code would be applied in the next browser thread cycle.

jdnarvaez · 2022-04-28T20:10:42Z

@jdnarvaez wait so does it works or not? ;O

this also seems to work
I would not expect that anything with "await" would work, because it means that the code would be applied in the next browser thread cycle.

It works fine for me in my local project, it does not seem to work on the sandbox that is linked above.

Vexcited · 2022-04-28T20:11:57Z

and also doesn't work in my Vite projects (made with yarn create vite and react-ts option)

anatoliykot · 2022-05-18T10:07:56Z

Doesn't work for me as well

anatoliykot · 2022-05-20T13:19:17Z

Solution:
vite.config.ts

export default defineConfig({
  plugins: [
    checker({ typescript: true }),
    svgr(),
    react({
      jsxImportSource: '@welldone-software/why-did-you-render', // <-----
    }),
  ],
  resolve: {
    alias: {
      // Needed for `useSelector` tracking in wdyr.tsx: https://github.com/welldone-software/why-did-you-render/issues/85
      'react-redux': 'react-redux/dist/react-redux.js',
    },
  },
});

wdyr.ts

/// <reference types="@welldone-software/why-did-you-render" />
import * as React from 'react';
import * as ReactRedux from 'react-redux';
import whyDidYouRender from '@welldone-software/why-did-you-render';

if (import.meta.env.DEV) {
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackExtraHooks: [[ReactRedux, 'useSelector']],
  });
}

Vexcited · 2022-05-30T19:56:50Z

Sorry for the late response but the solution from @anatoliykot seems to work for me so I'll close this issue !

Thanks you for your help !

jensbodal · 2022-07-11T19:26:05Z

Thanks for proposing a solution, a few questions:

> /// <reference types="@welldone-software/why-did-you-render" />
Why do you need to import types like this if you’re already using typescript?
What is the purpose of jsxImportSource? This seems to be working without it.
Where are you importing the wdyr.ts file?

jensbodal · 2022-07-11T23:15:22Z

What’s working for me is the following

wdyr.ts

import * as React from 'react';

if (import.meta.env.DEV && import.meta.env.VITE_ENABLE_WHY_DID_YOU_RENDER === 'true') {
  const { default: wdyr } = await import('@welldone-software/why-did-you-render');

  wdyr(React, {
    include: [/.*/],
    exclude: [/^BrowserRouter/, /^Link/, /^Route/],
    trackHooks: true,
    trackAllPureComponents: true,
  });
}

main.tsx

// eslint-disable-next-line import/order
import './wdyr';

...

const root = createRoot(container);
root.render( ...

tsconfig.json

    "module": "ES2022",
    "target": "ES2017"

Despite using the above module/target browserlist provides a prod build time check to ensure I’m still using compatible features (aka I can’t ship code that’s using top-level await but I can use them behind a dev flag)

No trace of wdyr in the build output and works locally with the flag enabled.

mwskwong · 2022-07-14T02:21:24Z

What’s working for me is the following

wdyr.ts
import * as React from 'react';

if (import.meta.env.DEV && import.meta.env.VITE_ENABLE_WHY_DID_YOU_RENDER === 'true') {
  const { default: wdyr } = await import('@welldone-software/why-did-you-render');

  wdyr(React, {
    include: [/.*/],
    exclude: [/^BrowserRouter/, /^Link/, /^Route/],
    trackHooks: true,
    trackAllPureComponents: true,
  });
}
main.tsx
// eslint-disable-next-line import/order
import './wdyr';

...

const root = createRoot(container);
root.render( ...
tsconfig.json
    "module": "ES2022",
    "target": "ES2017"
Despite using the above module/target browserlist provides a prod build time check to ensure I’m still using compatible features (aka I can’t ship code that’s using top-level await but I can use them behind a dev flag)

No trace of wdyr in the build output and works locally with the flag enabled.

Why is this marked as a solution? It imports why-did-you-render regardless of the environment it is in. It will include why-did-you-render in the production bundle.

jensbodal · 2022-07-14T11:56:20Z

Why is this marked as a solution? It imports why-did-you-render regardless of the environment it is in. It will include why-did-you-render in the production bundle.

... it does not include it in the production bundle

if (import.meta.env.DEV && import.meta.env.VITE_ENABLE_WHY_DID_YOU_RENDER === 'true') {

This line is statically analyzed and everything below it is omitted from the production bundle (if the condition is false), meaning why-did-you-render is not in the production bundle.

This also allows a user to turn it on or off locally by flipping an environment variable for VITE_ENABLE_WHY_DID_YOU_RENDER.

This is verified by reviewing the production bundle with and without these flags set, and also verifying the production bundle size is the exact same before and after this change.

mwskwong · 2022-07-14T12:41:32Z

Why is this marked as a solution? It imports why-did-you-render regardless of the environment it is in. It will include why-did-you-render in the production bundle.

... it does not include it in the production bundle
if (import.meta.env.DEV && import.meta.env.VITE_ENABLE_WHY_DID_YOU_RENDER === 'true') {
This line is statically analyzed and everything below it is omitted from the production bundle (if the condition is false), meaning why-did-you-render is not in the production bundle.

This also allows a user to turn it on or off locally by flipping an environment variable for VITE_ENABLE_WHY_DID_YOU_RENDER.

This is verified by reviewing the production bundle with and without these flags set, and also verifying the production bundle size is the exact same before and after this change.

Damn, I meant to quote @anatoliykot's post. For his case, it does include that in PROD. And yes, yours doesn't. But in certain instances, WDYR may be initialized too late because of the dynamic import. e.g. Your answer will not work in Gatsby.

jensbodal · 2022-07-14T14:21:19Z

Yeah I think the only way around that is to just leave import './wdyr.ts' commented out (and not having it use dynamic import) then commenting it back in when you need it.

For just vite+react I saw no difference between the two so I left it as I have it.

mwskwong · 2022-07-14T14:50:53Z

Yeah I think the only way around that is to just leave import './wdyr.ts' commented out (and not having it use dynamic import) then commenting it back in when you need it.

For just vite+react I saw no difference between the two so I left it as I have it.

I find the safest way is to simply use require and tell ESLint to ignore the checking on wdyr.ts.

jensbodal · 2022-07-14T15:32:18Z

Edit: globEager cannot be used conditionally like I have it below, so for vite purposes my first example is still what we are using.

So it looks like instead we can leverage vite’s globEager (docs appear out of date since globEager is mentioned there as an option) usage to have this do what we want. We cannot use require with vite, and this issue is specific to vite.

main.tsx

/* eslint-disable import/first */
if (import.meta.env.DEV && import.meta.env.VITE_ENABLE_WHY_DID_YOU_RENDER === 'true') {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-vars
  const autoImport = import.meta.globEager('./wdyr.ts'); 
  // nothing needs to be done with this variable but one needs to be declared in order to import the module
}

wdyr.ts

import wdyr from '@welldone-software/why-did-you-render';
import * as React from 'react';

wdyr(React, {
  include: [/.*/],
  exclude: [/^BrowserRouter/, /^Link/, /^Route/],
  trackHooks: true,
  trackAllPureComponents: true,
});

That said, I believe that my original suggestion still works the same since the import './wdyr' line will be converted to a static require with vite, and then the import of wdyr should be completed synchronously before the rest of the code.

angelitolm · 2023-01-07T16:18:50Z

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>

</React.StrictMode>
);

vzaidman · 2023-01-07T17:33:18Z

import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import App from './App'; import './index.css';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( <React.StrictMode> </React.StrictMode> );

where is the WDYR import?

gkatsanos · 2023-02-13T16:33:29Z

this actually worked. @vzaidman could we add this to the documentation? PR's welcome?

What’s working for me is the following

wdyr.ts
import * as React from 'react';

if (import.meta.env.DEV && import.meta.env.VITE_ENABLE_WHY_DID_YOU_RENDER === 'true') {
  const { default: wdyr } = await import('@welldone-software/why-did-you-render');

  wdyr(React, {
    include: [/.*/],
    exclude: [/^BrowserRouter/, /^Link/, /^Route/],
    trackHooks: true,
    trackAllPureComponents: true,
  });
}
main.tsx
// eslint-disable-next-line import/order
import './wdyr';

...

const root = createRoot(container);
root.render( ...
tsconfig.json
    "module": "ES2022",
    "target": "ES2017"
Despite using the above module/target browserlist provides a prod build time check to ensure I’m still using compatible features (aka I can’t ship code that’s using top-level await but I can use them behind a dev flag)

No trace of wdyr in the build output and works locally with the flag enabled.

vzaidman added question Further information is requested more info required labels Apr 18, 2022

Vexcited closed this as completed May 30, 2022

vzaidman mentioned this issue Jul 13, 2022

did not work with react 17/18. #249

Closed

KirianCaumes mentioned this issue Jan 18, 2023

Problem: React has detected a change in the order of Hooks called by BrowserRouter #256

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesn't work with Vite + React #243

Doesn't work with Vite + React #243

Vexcited commented Apr 12, 2022

vzaidman commented Apr 18, 2022

Vexcited commented Apr 18, 2022

jdnarvaez commented Apr 28, 2022

Vexcited commented Apr 28, 2022 •

edited

Loading

jdnarvaez commented Apr 28, 2022

Vexcited commented Apr 28, 2022

jdnarvaez commented Apr 28, 2022

vzaidman commented Apr 28, 2022 •

edited

Loading

jdnarvaez commented Apr 28, 2022

Vexcited commented Apr 28, 2022

anatoliykot commented May 18, 2022

anatoliykot commented May 20, 2022 •

edited

Loading

Vexcited commented May 30, 2022

jensbodal commented Jul 11, 2022

jensbodal commented Jul 11, 2022 •

edited

Loading

mwskwong commented Jul 14, 2022

jensbodal commented Jul 14, 2022 •

edited

Loading

mwskwong commented Jul 14, 2022 •

edited

Loading

jensbodal commented Jul 14, 2022

mwskwong commented Jul 14, 2022

jensbodal commented Jul 14, 2022 •

edited

Loading

angelitolm commented Jan 7, 2023

vzaidman commented Jan 7, 2023

gkatsanos commented Feb 13, 2023 •

edited

Loading

Doesn't work with Vite + React #243

Doesn't work with Vite + React #243

Comments

Vexcited commented Apr 12, 2022

vzaidman commented Apr 18, 2022

Vexcited commented Apr 18, 2022

jdnarvaez commented Apr 28, 2022

Vexcited commented Apr 28, 2022 • edited Loading

jdnarvaez commented Apr 28, 2022

Vexcited commented Apr 28, 2022

jdnarvaez commented Apr 28, 2022

vzaidman commented Apr 28, 2022 • edited Loading

jdnarvaez commented Apr 28, 2022

Vexcited commented Apr 28, 2022

anatoliykot commented May 18, 2022

anatoliykot commented May 20, 2022 • edited Loading

Vexcited commented May 30, 2022

jensbodal commented Jul 11, 2022

jensbodal commented Jul 11, 2022 • edited Loading

mwskwong commented Jul 14, 2022

jensbodal commented Jul 14, 2022 • edited Loading

mwskwong commented Jul 14, 2022 • edited Loading

jensbodal commented Jul 14, 2022

mwskwong commented Jul 14, 2022

jensbodal commented Jul 14, 2022 • edited Loading

angelitolm commented Jan 7, 2023

vzaidman commented Jan 7, 2023

gkatsanos commented Feb 13, 2023 • edited Loading

Vexcited commented Apr 28, 2022 •

edited

Loading

vzaidman commented Apr 28, 2022 •

edited

Loading

anatoliykot commented May 20, 2022 •

edited

Loading

jensbodal commented Jul 11, 2022 •

edited

Loading

jensbodal commented Jul 14, 2022 •

edited

Loading

mwskwong commented Jul 14, 2022 •

edited

Loading

jensbodal commented Jul 14, 2022 •

edited

Loading

gkatsanos commented Feb 13, 2023 •

edited

Loading