search

aidenybai / react-scan

Scan for React performance issues and eliminate slow renders in your app
https://react-scan.million.dev
MIT License
6.81k stars 73 forks source link

why react scan not work in my project #8

Open qtencent7 opened 2 weeks ago

qtencent7 commented 2 weeks ago

after adding the react scan script on the top of other scripts, when i input something in my input tag, i see nothing happened

aidenybai commented 1 week ago

can you show me how you installed it?

qtencent7 commented 1 week ago

image like this, i just put the script link there.

jnoncode commented 1 week ago

Hello. First of all, thank you for sharing this amazing library.

I’m experiencing the same issue. I created a project with Vite + React, then added the script in index.html, but it didn’t work. Instead, I installed it via npm (npm i react-scan), and it worked well. Is there any solution for the script issue? Thank you.

aidenybai commented 1 week ago

super weird. the cdn version might be cached to an older version, try:

qtencent7 commented 1 week ago

Hello. First of all, thank you for sharing this amazing library.

I’m experiencing the same issue. I created a project with Vite + React, then added the script in index.html, but it didn’t work. Instead, I installed it via npm (npm i react-scan), and it worked well. Is there any solution for the script issue? Thank you.

can you show how you make it work ?

qtencent7 commented 1 week ago

super weird. the cdn version might be cached to an older version, try:

image i figure it out, the script in your website just work fine, but not work for me because i haven't write a proper component.i find this util i use the component in your source file and i download you source project, find two color constant. what will purple represent and what will greem represent?

qtencent7 commented 1 week ago

image i see your home page, i don't get what the problematic renders mean. please try to explain it for me, thx

aidenybai commented 1 week ago

green isn't used at this time

what do you mean by "i haven't written proper component?"

problematic render = https://github.com/aidenybai/react-scan?tab=readme-ov-file#why-react-scan

jnoncode commented 1 week ago

can you show how you make it work?

Sorry for the confusion. After checking again, I realized my approach doesn’t work perfectly and only partially functions. However, since it doesn’t cause any errors, I wanted to share this approach with you.

I added a script to index.html and installed the package via npm. Using both methods together, there are no errors, and React Scan appears on the screen. However, rendering checks work on page reload and button clicks, they don’t trigger when typing in form inputs.

I hope my response is helpful to you.

jnoncode commented 1 week ago

super weird. the cdn version might be cached to an older version, try:

It’s still not working properly. May I share my results with you?

Here are the results of my project:

  1. Using the script method: Adding a script tag to index.html to import the library results in errors and doesn’t work. The error message is here:
message1

Even though I added import React from ‘react’, it doesn’t appear in the error message. This is my code.

message2

Could there be an issue here?

  1. Using the npm method: Importing the library via npm doesn’t produce any errors, but the library doesn’t appear on the screen.
  2. Using both the script and npm methods together: This doesn’t produce errors, and the library appears on the screen, but not all features work as expected. Rendering checks work on page reload and button clicks, but they don’t trigger when typing in form inputs.

Could this be due to a configuration issue or a missing setup on my project? If you need more information of my project setting, I’d be happy to provide it. Thank you for your time and support.

aidenybai commented 1 week ago

did you install it correctly via npm? it looks like intellisense is reporting that it's not even installed @jnoncode

qtencent7 commented 1 week ago

aiden, i am amazed by your idea of react-scan, i want to ask how many years have you been coding?

jam6123 commented 1 week ago

It doesn't work on mine either via npm, only works via script tag but with unexpected behaviour.

The unexpected behaviour is/are: I can barely see the blue lines, it shows the blue border line render indicator but with low opacity and doesn't have a label and it goes away immediately unlike on the example on official site they go away around 300ms to 500ms.

Screencast from 2024-11-19 22-51-49.webm

luissardon commented 1 week ago

I have the same issue as @jam6123, I can barely see the outline and the label doesn't always show up.

https://github.com/user-attachments/assets/df915f7c-77dd-4bff-b450-b2c752aea9de