I believe the react-scan should not be visible on production...only works on developement

[Mykel68]

No description provided.

[RobPruzan]

Hi, can you elaborate on your issue?

[lxsmnsyc]

I don't think there's any plans to limit this on development as react-scan is useful for diagnosing problems in production as well.

[onyedikachi23]

I don't think there's any plans to limit this on development as react-scan is useful for diagnosing problems in production as well.

I don't understand. You want a production ready app that users are already using to have a dev tool on the UI causing nuisance?

I've been trying to use git attributes and filters to remove the script tag from /index.html on every commit, but doesn't work anymore since after you guys added the cross-origin attribute to the tag.

I don't want this to appear on production. Please give us an option to disable on production.

[pivanov]

Just use env for dev and prod to enable or disable the script tab in your html file. Wha is you environment, what do you use ... next, vite, webpack ... custom one?

[onyedikachi23]

I use Vite, and can explain more about this env process.

[pivanov]

@onyedikachi23 yeah please :)
meanwhile ... you can check this vite pluign and let me know what do you think ... Is this what you need?

[charlieforward9]

based on this issue title, and the fact that I dont think this warrants opening another issue, id like to know how to remove the react-scan component in my production environment so users do not see it.

I tried this:

 <script>
    if (
      window.location.hostname !== <production_url>
    ) {
      document.write(
        '<script src="https://unpkg.com/react-scan/dist/auto.global.js"><\/script>',
      );
    }
  </script>

but this

1. does not work
2. logs this warning A parser-blocking, cross site (i.e. different eTLD+1) script, https://unpkg.com/react-scan/dist/auto.global.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

How do I hide this in my production build?

[pivanov]

window.location.hostname !== <production_url> is not correct ... few options:

1. you can use the plugin where you can use the flag enable: process.env.NODE_ENV or enable: import.meta.env.DEV
2. with script tag you can do this:

<script>
      if (!window.location.hostname.includes('localhost')) {
        const script = document.createElement('script');
        script.src = 'https://unpkg.com/react-scan/dist/auto.global.js';
        document.head.appendChild(script);
      }
    </script>

Option 2 is not recommended because you will not receive the full potential of react scan

Use option 1 with the vite plugin

[charlieforward9]

Sweet thank you! Any reason this plugin isn't a part of the million org?

[pivanov]

oh ... it is from yesterday :) sorry ... https://www.npmjs.com/package/@react-scan/vite-plugin-react-scan

It's the same one ... I just made the first version in my org ;)

[onyedikachi23]

oh ... it is from yesterday :) sorry ... npmjs.com/package/@react-scan/vite-plugin-react-scan

It's the same one ... I just made the first version in my org ;)

I tried installing with command from the first link you dropped, and it wouldn't work. I've also tried out this new link, but same here results. Here are the details:

• Running npx vite --host or npm run dev to setup the server, it gives the error:

   
   failed to load config from /[path]/vite.config.ts
   error when starting dev server:
   Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'babel-plugin-add-react-displayname' imported from /[path]/node_modules/@react-scan/vite-plugin-react-scan/dist/index.js
       at Object.getPackageJSONURL (node:internal/modules/package_json_reader:267:9)
       at packageResolve (node:internal/modules/esm/resolve:768:81)
       at moduleResolve (node:internal/modules/esm/resolve:854:18)
       at defaultResolve (node:internal/modules/esm/resolve:984:11)
       at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:688:12)
       at #cachedDefaultResolve (node:internal/modules/esm/loader:612:25)
       at ModuleLoader.resolve (node:internal/modules/esm/loader:595:38)
       at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:248:38)
       at ModuleJob._link (node:internal/modules/esm/module_job:136:49)
   
  

[pivanov]

Hey @onyedikachi23
I think I know where the issue is ... sorry about that ... can you try with latest version 0.1.1?
https://www.npmjs.com/package/@react-scan/vite-plugin-react-scan

[onyedikachi23]

@pivanov Same issue as before. Please note I'm using the --legacy-peer-deps flag to install, cause of dependency issues. The error message this time is a bit different:

failed to load config from /[path]/vite.config.ts
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'cheerio' imported from /[path]/node_modules/@react-scan/vite-plugin-react-scan/dist/index.js
    at Object.getPackageJSONURL (node:internal/modules/package_json_reader:267:9)
    at packageResolve (node:internal/modules/esm/resolve:768:81)
    at moduleResolve (node:internal/modules/esm/resolve:854:18)
    at defaultResolve (node:internal/modules/esm/resolve:984:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:688:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:612:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:595:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:248:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:136:49)

[charlieforward9]

can you try with latest version 0.1.1?
https://www.npmjs.com/package/@react-scan/vite-plugin-react-scan

@pivanov I tried here and got a bunch of errors in my codebase that I have never encountered before while running npm run dev: [vite-plugin-react-scan] ERROR: Failed to transform ...

Here are a few of the errors:

• Unexpected reserved word 'interface'
• Missing initializer in const declaration
• Unexpected token, expected ","

[pivanov]

oh ... ok... it's fixed now try with latest version pls

[charlieforward9]

Thanks! That seemed to work. Everything looks good now, but I am seeing this in my console: A bad HTTP response code (404) was received when fetching the script.

EDIT: Furthermore, when I hot reload, these errors still show up in my terminal now, but they dont crash the app anymore.

[pivanov]

@charlieforward9 ... A bad HTTP response code (404) ... if you use the plugin there is not HTTP calls ... the react-scan is loaded from node_modules if you still have <script /> who loads react-scan you should remove it ... the rest of the errors looks like not related to the vite plugin ... If you can share your vite config or reproduce the issues in clean project it will helps a lot to check what's going on