query-string@5 vs 6
query-string is a commonly used frontend library for parsing and stringifying URL query parameters. Normally, we can simply install and use the latest version 6.x. However, I once encountered a white screen incident that was ultimately traced back to compatibility issues with v6. This article focuses on clarifying the differences between v5 and v6, and their impact on web development.
Official Documentation on 5 vs 6 Differences
This module targets Node.js 6 or later and the latest version of Chrome, Firefox, and Safari. If you want support for older browsers, or, if your project is using create-react-app v1, use version 5: npm install query-string@5.
Looking at the Git commit history, I noticed the first v6 commit message. What exactly are “modern browsers” and which versions are supported?
Conclusion: The documentation is vague and has pitfalls.
Code Analysis
To accurately understand the differences between v5 and v6, we need to examine the code directly.
ChangeLog
Here are the main changes observed in v6 from the source code:
- Removed the object-assign third-party implementation and switched to native
Object.assign - Used const for constant declarations
- Used arrow function syntax sugar
- const compatibility: IE11+ [including 11]
- Object.assign and arrow functions: Not supported in IE
Conclusion
Without adding compatibility files, v6 does not support IE, while v5 does
React framework also doesn’t support IE without compatibility files. To support IE11, you need to add the following files:
import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';
One of the problems that polyfill solves is Object.assign, so if our web target is to support IE11, the added compatibility files can completely resolve query-string’s issues. If IE11 support is not needed, there’s even less to worry about - just upgrade directly.
- Since query-string v6 switched to using native
Object.assign, the bundle size is definitely further reduced, although this is minimal, but it’s good to know.
Final Thoughts
With browser standardization, and without considering IE as a problematic teammate, it seems that Safari, Edge, Chrome, and Firefox compatibility isn’t an issue. However, understanding compatibility remains an essential skill for frontend developers.
