Context

I have this construct:

[...new Array(2)].map((value, index) => `item${index}`)

When running it from browser, node, or jest tests, it consistently produces:

['item0', 'item1']

If I just had the same without the array clone using the spread operator:

new Array(2).map((value, index) => `item${index}`)

Then I would get (as expected, due to how map works):

[undefined, undefined]

Reasons for the above are explained here (I did not know this before):

[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#description]

Problem

I had this bug - when using storybook, even when using array clone:

[...new Array(2)].map((value, index) => `item${index}`)

I get the following result:

[undefined, undefined]

Fixing the issue is not a problem, I get the proper result when including .fill():

[...new Array(2).fill(undefined)].map((value, index) => `item${index}`)

But the question is, why would the above work differently with storybook? Does anyone know this?

Storybook Config

I am using Nx Framework for project creation, and pretty much the default storybook config.

This is the in-project configuration for storybook:

const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../src/app/**/*.stories.mdx',
    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

And this is the root storybook configuration referenced at the top of the above code block:

module.exports = {
  stories: [],
  addons: ['@storybook/addon-essentials'],
};