Within my codebase, there exists a function named range
that is responsible for generating ranges. The implementation of this function is outlined below:
export const range = (min: number, max: number) => {
// ...
return {
// ...
*[Symbol.iterator]() {
let n = min
while (n <= max) yield n++
}
}
}
When utilizing Array.from(range(1, 5))
, the expected output of [1, 2, 3, 4, 5]
is achieved. However, when attempting to spread the range with [...range(1, 5)]
, an unexpected result of [{[Symbol.iterator]: ƒ}]
is returned, indicating a single-element array containing the range object.
Further investigation reveals that the spread operator is being transpiled into the following construct:
// console.log(() => [...range(1, 5)])
ƒ () { return [].concat(range(1, 5)) }
While this approach would be suitable for spreading arrays, it fails when other types of iterables are involved.
The configuration within my .tsconfig
file is consistent with previous setups, targeting ESNext
. Modifying the downlevelIteration
setting to either true
or false
has no impact, leading me to believe the issue lies elsewhere.
It appears that Babel may be the culprit here, but I am struggling to determine the correct configuration adjustments. As my primary concern revolves around compatibility with modern versions of Chromium and Firefox, legacy browser support is not a critical factor.
Samples from package.json
:
"browserslist": "last 3 chrome versions, last 3 firefox versions"
Contents of .babelrc
:
{ "presets": [ [ "preact-cli/babel", { "modules": "commonjs" } ] ] }
The configuration in my preact.config.js
closely mirrors the one found here: preact.config.js
permalink. Here is the relevant excerpt:
webpack(config, env, helpers, options) {
// ...
config.module.rules = config.module.rules.map(rule => {
if (rule.loader === 'babel-loader') {
const use = [
{
loader: 'babel-loader',
options: rule.options
},
{
loader: 'ts-loader'
}
]
return {
...rule,
loader: undefined,
options: undefined,
use,
}
}
// ...
})
// ...
}
What steps should be taken to rectify this issue?