After releasing a new version of our react app, we encountered an issue with IE11 complaining about the use of the let keyword. Upon investigation, we discovered that upgrading the query-string package from version 5.1.0 to 6.4.0 introduced the usage of the let keyword in the codebase, which was not being properly compiled from ES6 to ES5 during our build process.
Our project utilizes typescript with babel 7 and webpack 4, which generally works well for our own code and most packages except for query-string.
Below are the configurations we have implemented, and we would appreciate any suggestions on the best way to resolve this issue:
webpack.config:
{
test: /\.(t|j)sx?$/,
exclude: /node_modules/,
use: [
{ loader: 'babel-loader' },
{
loader: 'ts-loader',
options: { transpileOnly: true }
}
]
}
tsconfig.json:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"allowJs": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"lib": ["webworker", "esnext", "dom"],
"sourceMap": true,
"baseUrl": ".",
"paths": {
"*": ["./src/*"]
},
"jsx": "preserve",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true
},
"include": ["./src/**/*", "./**/*.d.ts"],
"exclude": ["node_modules"]
}
.babelrc
const presets = [
'@babel/preset-typescript',
'@babel/preset-react',
[
'@babel/preset-env',
{
targets: {
// React parses on ie 9, so we should too
ie: 9
},
forceAllTransforms: true,
// Disable polyfill transforms
useBuiltIns: false,
// Do not transform modules to CJS
modules: false
}
]
]
Sample Source File
import queryStringLib from 'query-string'
queryStringLib.stringify(...)
In an attempt to address the issue, we experimented by removing exlcude node_modules in both webpack.config and tsconfig.json, as well as changing tsconfig.json to target es5. Although this solution worked, it significantly increased CPU load. Thus, it is not an ideal resolution.
Update #1
I just tried, It will work, if I remove exclude node_modules in both webpack.config and tsconfig.json, and change tsconfig.json to target es5. However it will make the computer a lot busier than before. Not a perfect solution.
Thank you, Ron