why react scan not work in my project

[qtencent7]

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]

can you show me how you installed it?

[qtencent7]

like this, i just put the script link there.

[kjinengineer]

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]

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

<script src="https://unpkg.com/[email protected]/dist/auto.global.js"></script>

[qtencent7]

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]

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

<script src="https://unpkg.com/[email protected]/dist/auto.global.js"></script>

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]

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

[aidenybai]

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

[kjinengineer]

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.

[kjinengineer]

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

<script src="https://unpkg.com/[email protected]/dist/auto.global.js"></script>

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:

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

Could there be an issue here?

2. Using the npm method: Importing the library via npm doesn’t produce any errors, but the library doesn’t appear on the screen.
3. 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]

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

[qtencent7]

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

[jam6123]

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]

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

Screen.Recording.2024-11-21.at.8.54.01.AM.mov

[pivanov]

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

Small workaround:

<script>
    const script = document.createElement('script');
    script.src = `https://unpkg.com/your-package@latest?nocache=${Date.now()}`;
    script.type = 'text/javascript';
    document.head.appendChild(script);
</script>

[pivanov]

@kjinengineer
For Vite you can check this one @pivanov/vite-plugin-react-scan :)

please let me know how it's work.