Steps to replicate the issue (include links if applicable):
- Go to https://nl.wikipedia.org/w/index.php?search=harlingen&title=Speciaal:Zoeken&profile=advanced&fulltext=1&ns0=1
- Hover over one of the search results and click the arrow
- Go to https://nl.wikipedia.org/w/index.php?search=harlingen&title=Speciaal:Zoeken&profile=advanced&fulltext=1&ns0=1&debug=true (same URL but with debug=true added), and do the same thing
What happens?:
In non-debug mode, everything works fine. In debug mode, the Vue app crashes with a syntax error.
What should have happened instead?:
The app should not crash
Software version (skip for WMF-hosted wikis like Wikipedia):
WMF production
Other information (browser name/version, screenshots, etc.):
This happens because our treatment of Vue templates in debug mode eats newlines. In non-debug mode, our output looks like this:
module.exports.template = "<div class=\"quickViewDescription\" :class=\"{\n\t\t\t\/\/ eslint-disable-next-line vue\/camelcase\n\t\t\tquickViewDescription__mobile: isMobile,\n\t\t\t'quickViewDescription--small-font': showSmallFont\n\t\t}\">...etc...<\/div>";
but in debug mode, it looks like this:
module.exports.template = "<div class=\"quickViewDescription\" :class=\"{ \ \/\/ eslint-disable-next-line vue\/camelcase \ quickViewDescription__mobile: isMobile, \ 'quickViewDescription--small-font': showSmallFont \ }\"> \ ...etc... \ <\/div>";
These extra line breaks are intended to improve readability (and they do), but they result in a different string. JavaScript doesn't interpret a backslash-escaped newline as a newline, it just ignores the newline instead. This causes newlines to be changed to spaces, which is fine for most purposes but breaks JS comments.
We can fix this by adding \n near the end of the line, before the last backslash.