vite:dep-scan transformations can cause syntax errors confusingly reported by esbuild

[tjk]

For example, if you write the code (notice await in a comment):

// something something await
watch(() => result.data.value, data => {
}, { immediate: true })

The code here:

vite/packages/vite/src/node/optimizer/scan.ts

Lines 221 to 223 in d3142cf

	if (js.includes('await')) {
	js = js.replace(/\bawait\s/g, 'void ')
	}

will produce the following code to get sent to esbuild:

// something something void       watch(() => result.data.value, data => {
}, { immediate: true })

User will just see this error:

 > /component.vue:53:9: error: Expected identifier but found "{"
    53 │       }, { immediate: true })
       ╵          ^

error during build:
Error: Build failed with 1 error:
html:/component.vue:53:9: error: Expected identifier but found "{"

Does a proper parse need to happen to not secretly cause these issues or would a naive 'in comment' or 'in string' heuristic be good enough? At the very least it would maybe be nice to see what the code esbuild errored on but that seems non-trivial given it is just provided entries and then communicates back progress asynchronously?

[yyx990803]

It would be ideal to avoid incurring the cost of full AST parses here. It seems this edge case is easy to fix though.

[tjk]

That's a nice (and simple) fix. Thanks!

[rangoy]

It seems like this problem also applies to the use of for await loops to;

    for await (const x of y) {
        console.log(x);
    }

In this case await is still replaced with void and is causing an syntax error

 error: Expected "(" but found "void"
     │     for void (const x of y) {

[Niputi]

@rangoy are you experiencing this error in development? you might need to force esbuild to higher version as it seems there have been a for loop code generation fix in this version https://github.com/evanw/esbuild/releases/tag/v0.12.2

[rangoy]

@Niputi, I'm experiencing this in development when running yarn dev.

I haven't traced the to the core but what I see is that it is related to the same replace;

I can use one of the following workarounds to get it working now;

1. If i remove the space after await it works after the new change.
   for await(const x of y) {} instead of for await (const x of y) {}
   I think this works because the new version of the regex only matches when there's a space after await.

2. Move the for await loops out of <script setup> to it's own ts modules

3. Comment out the sections with for await during startup, and they work as they should if I put them back with the server running also works. After this it seems like the replace isn't done anymore and I can restart the server. If I delete node_modules/.vite the problem reappears and I have to use one of the workarounds get it working again

[rangoy]

I'm not sure if I get the reason why these replaces has to be done but I guess adding a new replace before the one changed in cbfc3e9 could solve the issue

Something like (untested)

js = js.replace(/\bfor\s+await(\s)/g, 'for$1')

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.