Array destructuring assignment to default parameters: keeping both array and items variables

I'm trying to get the best of both worlds in one go: individual variables to reference a specific function call result, and an array variable with all those results.

If you paste the code below in your browser console or node runtime it will _just work™ without errors:

function useFieldX() { return { state: 'x' } }
const fields = [ fieldX = useFieldX()]
console.log(fields) // [{ state: 'x' }]
console.log(fieldX) // { state: 'x' }
console.log(fieldX === fields[0]) // true

But bundling/transpiling this code throws ReferenceError: fieldX is not defined. What might be the reason for that?

Note: I understand that fieldX variable should in theory be already declared in the current scope to be assigned, but why does it work in the abovementioned contexts though?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function useFieldX() { return { state: 'x' } }
const fields = [ fieldX = useFieldX()]
console.log(fields) // [{ state: 'x' }]
console.log(fieldX) // { state: 'x' }
console.log(fieldX === fields[0]) // true

<!-- end snippet -->

Assignment to implicit globals is forbidden in strict mode which turns several bad practises likely to lead to mistakes into errors. Code just running in a browser or a node repl doesn't run in strict mode.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

!function () {
    implicitGlobal1 = 1;
}();
!function () {
    "use strict";
    implicitGlobal2 = 1;
}();

<!-- end snippet -->

Code generated by Parcel (which you should mention in your question and not depend on people to follow a link to your project on a different site and dig around in your package.json to identify) runs in strict mode.