new Date does not work with a valid ISO-8601 date string

[sean-clayton]

I'm using the react-intl library which relies on new Date() to function for date formatting. Storybook injects a few ES5 shims from es5-shim (from airbnb-js-shims), which overwrites the browsers Date function with its own. Using es5-shim's Date function, it cannot parse this valid ISO 8601 date string: "2017-04-31T10:39:10-04:00", and returns Invalid date. Unfortunately, we're using Storybook to test these components which heavily rely on dates and we're constantly seeing Invalid date.

In the following, you'll notice the same date will return different results on a vanilla Chrome instance with and without Storybook

Expected (vanilla Chrome)

new Date('2017-04-31T10:39:10-04:00')
// Mon May 01 2017 10:39:10 GMT-0400 (EDT)

typeof new Date('2017-04-31T10:39:10-04:00')
// "object"

Date('2017-04-31T10:39:10-04:00')
// "Tue Aug 23 2016 16:07:38 GMT-0400 (EDT)"

typeof Date('2017-04-31T10:39:10-04:00')
"string"

Currently (vanilla Chrome with Storybook)

new Date('2017-04-31T10:39:10-04:00')
// Invalid Date

typeof new Date('2017-04-31T10:39:10-04:00')
// "object"

Date('2017-04-31T10:39:10-04:00')
// "Tue Aug 23 2016 16:09:07 GMT-0400 (EDT)"

typeof Date('2017-04-31T10:39:10-04:00')
"string"

[arunoda]

Okay. This is bad.
We should do something for this.

[arunoda]

@sean-clayton Try to use Storybook v2.5.0. It has the fix for this.
See #402 for more info.

[arunoda]

Reopen if this doesn't solve your issue.

[ljharb]

Instead of replacing es5-shim, could you perhaps have filed a bug on it? I'll be happy to fix it and publish a replacement ASAP. core-js and babel-polyfill are very heavyweight, and Airbnb won't be able to continue using storybook if it relies on it.

[ljharb]

@sean-clayton have you tried that Date string in other browsers than Chrome? Unless all the browsers parse it the same, then "Invalid date" is in fact the proper thing for Date to be producing. If it is the same across browsers, then it's an es5-shim bug, and I'd be happy to fix it.

[arunoda]

@ljharb That's due to sudden of the release of Storybook 2. I think it was too quick.
Seems like it's only Chrome thing.
I'll revert this commit.

[rnanania]

This is still happening with this versions

Storybook - ^6.0.28
Chrome - Version 86.0.4240.193

Error log in Chrome
Uncaught TypeError: Cannot read property '2' of undefined at new ShiftedDate (<anonymous>:48:42) at new Date (vendors~main.39af3481098ad3d1e989.bundle.js:117388) at Object.<anonymous> (vendors~main.39af3481098ad3d1e989.bundle.js:121814) at vendors~main.39af3481098ad3d1e989.bundle.js:118044 at Object.<anonymous> (vendors~main.39af3481098ad3d1e989.bundle.js:118048) at Object../node_modules/es6-shim/es6-shim.js (vendors~main.39af3481098ad3d1e989.bundle.js:121911) at __webpack_require__ (runtime~main.39af3481098ad3d1e989.bundle.js:849) at fn (runtime~main.39af3481098ad3d1e989.bundle.js:151) at Object../node_modules/airbnb-js-shims/target/es2015.js (vendors~main.39af3481098ad3d1e989.bundle.js:43725) at __webpack_require__ (runtime~main.39af3481098ad3d1e989.bundle.js:849)

Firefox and Safari working as expected.