Turn blank with `numberToPartsFormatter` error on first message

Screenshots

Uncaught TypeError: numberToPartsFormatter is not a function
    at Object.numberFormatter (number.js:505)
    at date.js:636
    at String.replace (<anonymous>)
    at dateFormat (date.js:345)
    at dateToPartsFormatter (date.js:1462)
    at dateFormatter (date.js:648)
    at useDateFormatter.js:69
    at StackedLayout (StackedLayout.js:205)

TypeError: e is not a function
    at Object.<anonymous> (number.js:579)
    at date.js:697
    at String.replace (<anonymous>)
    at T (date.js:388)
    at date.js:1575
    at date.js:715
    at useDateFormatter.js:8
    at A (StackedLayout.js:115)
    at ha (react-dom.production.min.js:154)
    at Ns (react-dom.production.min.js:259)

Version

4.8.0.

This only affect Web Chat installed thru NPM. It did not affect our webchat.js bundle.

Describe the bug

We use globalize for date time formatting and internationalization.

To reduce footprint and (prod) install time, we use globalize-compiler to extract Unicode CLDR data. On runtime, we use globalize/dist/globalize-runtime to load the data.

globalize@1.5.0 was released on 2020-03-25. Since we only lock down on major versions (@^1.4.2), new NPM install of Web Chat will automatically install the latest version @1.5.0.

As the data we extracted and packaged in the NPM package is older (@1.4.2) than its runtime (@1.5.0), the data failed to load.

We believe in case of version incompatibility, globalize should bump its version to next major.

We filed a bug to globalize here, https://github.com/globalizejs/globalize/issues/895.

Steps to reproduce

1. npx create-react-app app
2. cd app
3. npm install botframework-webchat
4. Instantiate Web Chat control in the React app
5. Send a message

Expected behavior

The message should send successfully.

Additional context

Workarounds

Before globalize team fix the bug, there are 2 workarounds:

Modify package-lock.json

This is preferred method and the mechanism is also used by npm audit fix.

After Web Chat is installed, modify package-lock.json to downgrade to globalize@1.4.2.

  "globalize": {
-   "version": "1.5.0",
-   "resolved": "https://registry.npmjs.org/globalize/-/globalize-1.5.0.tgz",
-   "integrity": "sha512-76fcPQO/WLthtSwjgIZ/Zv2XSXqv9ifvl1PwIxJNCZNFHigGCpg3fBZ0poJ30b2kdDgofPkYl478lVZA6esESQ==",
+   "version": "1.4.2",
+   "resolved": "https://registry.npmjs.org/globalize/-/globalize-1.4.2.tgz",
+   "integrity": "sha512-IfKeYI5mAITBmT5EnH8kSQB5uGson4Fkj2XtTpyEbIS7IHNfLHoeTyLJ6tfjiKC6cJXng3IhVurDk5C7ORqFhQ==",
    "requires": {
      "cldrjs": "^0.5.0"
    }
  },

Then, run npm install to reinstall all dependencies.

Please do commit package-lock.json to your repository. This is highly recommended as it make sure your dependencies will keep exactly the same across fresh clone. Please read this article for details about package-lock.json.

Install globalize@1.4.2 locally

In case package-lock.json is not committed to your repository, you can use this method.

Before or after Web Chat is installed, run npm install globalize@1.4.2. This will install a local version of globalize and pin it down to 1.4.2.

Verify workarounds

You can verify by:

• cat node_modules/globalize/package.json
  • version should read 1.4.2
• ls node_modules/botframework-webchat/node_modules
  • There should be no globalize installed under botframework-webchat/node_modules

[Bug]

Start by checking package-lock.json and the dependency declarations for globalize, then compare the installed version with the extracted CLDR data described in the report. Reproduce with the create-react-app steps and confirm a fresh NPM installation can send the first message without the number.js/date.js TypeError.