Babel 7 and webpack 4 not working for Conditional

问题:

I am facing peculiar problem where short circuit syntax is not working after upgrading to Babel 7 from previous version where I was using stage-0 and it was working without any issues

Do Not work:

...isCSCProfile && [{ isComplete: progressbarStates[3] === PROGRESS_BAR_SUCCESS, messageKey: commonOrderMessages.service_request_header, link: "serviceRequest-header" }],

Works:

...(isCSCProfile ? [{ isComplete: progressbarStates[3] === PROGRESS_BAR_SUCCESS, messageKey: commonOrderMessages.service_request_header, link: "serviceRequest-header" }] : []),

I have included Babel-Polyfill plugin in webpack and I am testing in latest chrome version

So question is which plugin should I include to make it work without changing the code

回答1:

I'm assuming that isCSCProfile is boolean. If isCSCProfile is false, then you're trying to spread a boolean in the first case, which will not work.

After digging a bit more into this it seems I was wrong about spread syntax not working for booleans. @babel/plugin-transform-spread has option named loose, that should just skip "nullish" values, which is what you want here. There's also an open issue about loose mode consistency, which is very likely the reason this doesn't work right.