Bug report
What is the current behavior?
The minification step of the production mode breaks the build and the code cannot be run inside the browser.
Explanation (please see the reproduction repo):
The match-sorter dependency includes a dependency called remove-accents, that maps characters with a diacritic to a character without a diacritic, e.g. À to A. This dependency is used in the match-sorter dependency to remove accents from strings before sorting them.
The original code is similar to this:
var characterMap = {
"À": "A",
"Á": "A",
"Â": "A",
"Ã": "A",
"Ä": "A",
// ...
};During the production build process (enabled by config.mode === "production"), webpack minifies the code. This results in the following code:
// prettified for readability
var r = {
// notice the missing quotes around the keys
À: "A",
Á: "A",
Â: "A",
Ã: "A",
Ä: "A",
// ...
};The browser interprets this as a syntax error, because the keys are not quoted. This is not a problem in development mode, because the code is not minified and the quotes aren't removed. When we take a look at the source code in the browser, the code looks like this:
The result: Uncaught SyntaxError: Invalid or unexpected token (at main.js:233:14).
As soon as we put the key in quotes, the error is gone.
If the current behavior is a bug, please provide the steps to reproduce.
Clone the following repo and follow the instructions described in the README.
https://github.com/unzico/webpack5-prod-minify
What is the expected behavior?
The minifier shouldn't remove the quotes from characters that have a diacritic, if the character is the key of an object.
Instead of
var r = {
À: "A",
Á: "A",
Â: "A",
// ...
};it should be
var r = {
"À": "A",
"Á": "A",
"Â": "A",
// ...
};Other relevant information:
webpack version: 5.88.2
Node.js version: 18.16.0
Operating System: Windows 10
Additional tools: Google Chrome Version 114.0.5735.199 (official build) (64 bit)
Bug report
What is the current behavior?
The minification step of the production mode breaks the build and the code cannot be run inside the browser.
Explanation (please see the reproduction repo):
The
match-sorterdependency includes a dependency calledremove-accents, that maps characters with a diacritic to a character without a diacritic, e.g.ÀtoA. This dependency is used in thematch-sorterdependency to remove accents from strings before sorting them.The original code is similar to this:
During the production build process (enabled by
config.mode === "production"), webpack minifies the code. This results in the following code:The browser interprets this as a syntax error, because the keys are not quoted. This is not a problem in development mode, because the code is not minified and the quotes aren't removed. When we take a look at the source code in the browser, the code looks like this:
The result:
Uncaught SyntaxError: Invalid or unexpected token (at main.js:233:14).As soon as we put the key in quotes, the error is gone.
If the current behavior is a bug, please provide the steps to reproduce.
Clone the following repo and follow the instructions described in the README.
https://github.com/unzico/webpack5-prod-minify
What is the expected behavior?
The minifier shouldn't remove the quotes from characters that have a diacritic, if the character is the key of an object.
Instead of
it should be
Other relevant information:
webpack version:
5.88.2Node.js version:
18.16.0Operating System:
Windows 10Additional tools:
Google Chrome Version 114.0.5735.199 (official build) (64 bit)