regex based filter in asset-import-meta-url ignores actual code in some cases

Describe the bug

Hey!

When using new URL(..., import.meta.url), for some cases vite does not transform the URLs to point to bundled assets (only when building though, works fine in dev 🧑‍💻)

Reproduction

Go to repro and in the terminal do

npm run build
npm run preview

Browser console should show (notice the second URL isn’t transformed)

Why?

It seems these regex filters are at fault https://github.com/vitejs/vite/blob/4433df4c6b278d5a2f4d2ca14f0a7930ed647e80/packages/vite/src/node/plugins/assetImportMetaUrl.ts#L34-L37

// before

import "./App.css";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
console.log("1", new URL("./logo.svg", import.meta.url).href);
console.log("2 //", new URL("./logo.svg", import.meta.url).href);
function App() {
  return /* @__PURE__ */ _jsx(_Fragment, {
    children: /* @__PURE__ */ _jsx("img", {
      src: new URL("./logo.svg", import.meta.url).href
    })
  });
}
export default App;

// after filtering with regexes

import '';
import { jsx as _jsx } from '';
import { Fragment as _Fragment } from '';
console.log('', new URL('', import.meta.url).href);
console.log(''img''./logo.svg", import.meta.url).href
    })
  });
}
export default App;

More importantly, the order in which they are applied seems to be the problem i.e. since singlelineCommentsRE is quite broad, removing line comments before strings messes the code in weird ways 🐞

How do we fix? 🔨

AFAICT removing strings before line comments fixes such problems (shouldn’t create new bugs either?)

 const noCommentsCode = code 
   .replace(multilineCommentsRE, blankReplacer) 
-  .replace(singlelineCommentsRE, blankReplacer)
-  .replace(stringsRE, (m) => `'${'\0'.repeat(m.length - 2)}'`)
+  .replace(stringsRE, (m) => `'${'\0'.repeat(m.length - 2)}'`)
+  .replace(singlelineCommentsRE, blankReplacer) 

---

PS: I stumbled across this when trying to consume Emscripten’s release build (-Oz) from vite. In release emcc minifies all JS and puts it in single line, that line had // somewhere in the middle, and everything went kaboom 💥 🤣

Reproduction

https://stackblitz.com/edit/vitejs-vite-vc6p2d?file=src%2FApp.tsx&terminal=dev

System Info

System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 84.89 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.asdf/shims/node
    Yarn: 1.22.17 - ~/.asdf/shims/yarn
    npm: 8.1.2 - ~/.asdf/shims/npm
  Browsers:
    Chrome: 99.0.4844.84
    Safari: 15.2
  npmPackages:
    @vitejs/plugin-react: ^1.0.7 => 1.1.4
    vite: ^2.7.2 => 2.7.10

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[jawadsh123]

thanks @poyoho!

[poyoho]

Thank you very much for your correction 😊