使用 TypeScript 和 Webpack 的可选链接失败的传播

Question

I have an application with TypeScript bundled with webpack.

I am using spread operators:

const payload = {
  ...originalList,
  byKey: {
    [listId]: {
      ...originalList?.byKey[listId],
      members: [
        ...originalList?.byKey[listId]?.members, // <== members may be undefined
        {
          id: data?.attributes?.id,
        },
      ],
    },
  },
};

When members is undefined, I get an error:

TypeError: can't access property Symbol.iterator of undefined

But this only happens on Firefox; on Chrome, for example, it pass. May it be related to my webpack build or the tsconfig?

This is the tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/",
    "jsx": "react",
    "allowJs": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "ES6",
    "lib": ["ES6", "dom", "esnext"],
    "resolveJsonModule": true,
    "esModuleInterop": true,
  },
  "include": ["./src/**/*", "./*"]
}

This is my webpack

const webpackClientDevConfig = {
  mode: 'development',
  entry: ['webpack-hot-middleware/client', WEBPACK_SRC_CLIENT],
  output: {
    filename: 'client-[hash:4].js',
    publicPath: WEBPACK_ROOT,
  },
  devtool: '#source-map',
  stats: 'normal',
  module: {
    rules: [
      {
        test: /\.(less|css)$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
        exclude: /node_modules/,
      },
    ],
  },

[…] etc.

I'm really curious, any help will be welcome

Answer 1

Undefined isn't spreadable. So if the? triggers then the result is undefined, and your code is effectively...undefined which obviously doesn't work.

Use?? To coelesce to an empty array...(thing?. Prop?? []), Or find another way to handle null/undefined (like an if check)