Ability to target files inside node_modules

[itsdouges]

Description

Hello! I'm using a temp folder inside node_modules that contains generated files to be used during dev time. Unfortunately the current implementation of this plugin skips over any module that has node_modules in its name, and this can't be worked around via include/exclude. Because of this the components that are generated never get wrapped with fast refresh, and thus only their very parent component has it available. Because of this when the components inside the temp folder in node_modules change, only the parent updates, but it doesn't get the latest modules since they weren't invalidated (and thus still cached).

Would you be open in a contribution changing this in some form? Happy to be guided in a path forward. Very keen to contribute and make this work.

Suggested solution

Update the code around here https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/src/index.ts#L217 so it removes the hardcoded assumption of node_modules, ideally in a backwards compatible way so as not to cause a major release (and thus friction in getting this change in).

Alternative

There isn't an alternative currently as the node_modules exclusion is hardcoded. As I want to ship a package I can't patch package my way out of this either (as that'll only fix it for myself.. but noone else using my package!) (if I want to hide the temp files).

Edit: Otherwise I can have a folder outside of node_modules, which is what I'll probably do if nothing can be done.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ArnaudBarre]

Why don't you use a generated folder outside of node_modules in dev?

[itsdouges]

I wanted to be cute and hide the generated code without adding an extra gitignore field into the mix to make sure they don't get checked in - but you're absolutely correct and if nothing can be done that's what I'll end up doing 😃.

---

Is it possible to have this plugin target virtual modules? E.g:

import { Plugin, transformWithEsbuild } from 'vite';

const sceneHmrId = "triplex:scene-frame.tsx";
const virtual = (str: string) => "\0" + str;

export function scenePlugin(): Plugin {
  return {
    name: "triplex:scene-glob-plugin",
    enforce: "pre",
    resolveId(id: string) {
      if (id === sceneHmrId) {
        return virtual(sceneHmrId);
      }
    },
    async load(id: string) {
      if (id === virtual(sceneHmrId)) {
        const result = await transformWithEsbuild(
          `
            import { Scene as SceneFrame } from "@triplex/run/scene";

            const scenes = import.meta.glob('@@/**/*');

            export function Scene() {
              return <SceneFrame scenes={scenes} />;
            }
          `,
          sceneHmrId,
          { loader: "tsx" }
        );

        return result;
      }
    },
  } as const;
}

Currently I haven't found a way to have it run over it. Appreciate it if you know 🙏.

[ArnaudBarre]

I not sure what you are doing but I don't see anything obviously wrong with what you are doing. You can avoid calling esbuild yourself, it will be executed after in the pipeline I think.

For now without having better understanding of your usecase, I think having HMR code inside node_modules is not a good idea.

[itsdouges]

If I don't run it through esbuild it won't be transformed. Is there a plugin config or something I'm missing to have this behaviour?

Similarly with this plugin it won't currently add it to the virtual module, I've worked around it by copying code over but it's not ideal. I'll test later tonight to see if all I need is a correct filter set (e.g that the virtual module is at least picked up by this plugin).

As for node modules I'm just storing modules in there in a temp directory, that can be updated during the lifecycle if the app. It is easy enough to not put them in there which is what I've done for now, but if possible would like to use it as it's one less folder visible to consumers.

[usercao]

I think node_modules should be a read-only folder in development and should not be changed. What do you think?

[ArnaudBarre]

I think the plugin is not running over it because of the virtual prefix. But mybe something like this will work:

import { Plugin } from 'vite';

const sceneHmrId = "triplex:scene-frame.tsx";

export function scenePlugin(): Plugin {
  return {
    name: "triplex:scene-glob-plugin",
    enforce: "pre",
    resolveId(id: string) {
      if (id === sceneHmrId) {
        return sceneHmrId;
      }
    },
    async load(id: string) {
      if (id === sceneHmrId) {
        return `
import { Scene as SceneFrame } from "@triplex/run/scene";

const scenes = import.meta.glob('@@/**/*');

export function Scene() {
  return <SceneFrame scenes={scenes} />;
}
`;
      }
    },
  };
}

[itsdouges]

Ah so remove the virtual prefix? I'll give it a shot.

[ArnaudBarre]

Yep this is a convention to not be pickup by other plugins, but that's not what you want here

[itsdouges]

Thanks @ArnaudBarre that looks to be the answer! Really appreciate you taking the time to go over that - now that I think about it I noticed this in the Vite docs but it didn't occur to me. At least now I know the difference for when to use it or not 😄.

Thanks again. I'll close this off.

[itsdouges]

@ArnaudBarre I am getting one warning though which I think might be coming from this plugin - Sourcemap for "triplex:scene-frame.tsx" points to missing source files.

Looking through Vite documentation I don't see anything that sticks out 🤔. Is there anything special I need to do for source maps with virtual modules?

[ArnaudBarre]

Hum not sure to understand the root cause, but you can try something like this:

return { code: `...`, map: null }

[itsdouges]

Thanks mate, yeah that didn't work unfortunately! I'll dig into it and raise another issue if needed, thanks again