Rest 1/2 of Disable dynamic import wrapper __vite__injectQuery

[b5414]

Description

Reopen #16241 issue, because only 1/2 is solved for me / for my user case..

The problem is gone but only when I'm running npm run build, and the build version is going good (Thanks @bluwy), but if I running the same code but usings npm run dev (renamed to start in my sample project, which attached below)

Suggested solution

In both cases, vite should skip adding the compiler wrapper (__vite__injectQuery) if this is indicated by a special comment:

• /* @vite-ignore */

Alternative

undo #16556 (ha ha)

Additional context

Repo: https://github.com/b5414/sample // attention to src\rendered\assets\background_modules.js:21

To see the issue, just open the console (ctrl + shift + i or f12) of opened google dot com window by extension with S icon

• if you running build - you will see: test info: <Module>
• if you running start - you will see: test err: bla bla bla __vite__injectQuery undefined

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.

[sapphi-red]

Unfortunately we cannot simply skip injecting __vite__injectQuery as it'll break some apps (#14851 (comment)). I guess #9981 could solve this in an ideal way.

[b5414]

@sapphi-red why not?

now VITE is bipolar: on build you got one result, and on running dev - different

You can jump into my sample repo and check why is it important, at least for my existing (and prod) case

---

Idk what is your #9981 case, but if it should work with my case - please, just show me, and reply with comment, like why is it should be "this crunch" and not the All-In-One-Box tool (as vite is, by mho)

[b5414]

The problem is that I don't manage the file connection/importanation and configureServer with server.middlewares.use doesn't work well, I have tried specifying "?import" in paths but all in vain;

The whole script runs in the "service-worker" (background.js) file where I can't use dynamic loading of files and then the TEXT (directory path for example) goes to the chrome tab where I can't DIRECTLY take the file from the extension's local path as required by the CHROME API

---

because I believe this text above is hard to understand, once again:

• func_super_for_inject function which going to be JSON.stringify then JSON.parse by CHROME during the execFunc

• whole body of func_super_for_inject is ISOLATED, and I only can give the SIMPLE params by arguments, like basic_file_dir

I have tried:

• const basic_file_dir = '/rendered/assets/basic.js';
• const basic_file_dir = 'http://localhost:3000/rendered/assets/basic.js?import'; // direct dev path
• const basic_file_dir = chrome.runtime.getURL('/rendered/assets/basic.js' + '?import');
• const basic_file_dir = chrome.runtime.getURL('/rendered/assets/basic.js') + '?import';

and I have seen the trying path at console log

and I believe configureServer(server) + server.middlewares.use works only on NOT dynamic import (it means: it's not my case)

[FranklinWhale]

__vite__injectQuery is breaking import() with import attributes.

await import(/* @vite-ignore */`/api/${path}`, { with: { type: "json" } });

becomes

await import(
  /* @vite-ignore */
  __vite__injectQuery(`/api/${path}`,
  { with: { type: "json" } }, 'import')
)

[ins429]

Any progress with this?

[shacha086]

If I do something like

if (pm.type === "module") {
    import(storage_url).then((module) => {
        that.kag.ftag.nextOrder();
    });
}

the import analyser will prepend import {injectQuery as __vite__injectQuery} from "/@vite/client"; into script and it will crash on non-esm runtime. Adding file to optimizeDeps.exclude doesn't helps either. It’s better to have a master switch that completely disables this injection.

[nicolo-ribaudo]

I'm struggling with this same problem. I have a non-analyzable import that loads an external resource:

const cssUrl = "https://example.com/foo.css"

function load() {
  import(/* @vite-ignore */ cssUrl, { with: { type: "css" } })
}

And Vite is producing this output, removing the import attributes:

function load() {
  import(
	/* @vite-ignore */
	__vite__injectQuery(cssUrl, { with: { type: "css" } }, 'import')
  );
}

I am happy to contribute a fix, but I need pointers in what the expected behavior would be.

[nicolo-ribaudo]

This might be an es-module-lexer bug: guybedford/es-module-lexer#196