Require webpack 5 in our lib. Add minimum webpack and typescript versions to storybook. Update html-to-parser version

change/@internal-react-components-072cc54d-a247-459c-b8a8-8101ff98f2e2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update html-to-react dependency. Note: This change requires Webpack > 4.",
+  "packageName": "@internal/react-components",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@internal-storybook-f359b390-2a8f-472c-9495-a2bcf93f3068.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add documentation for minimum typescript and webpack versions.",
+  "packageName": "@internal/storybook",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/package.json

@@ -35,7 +35,7 @@
     "@fluentui/react": "~8.98.3",
     "copy-to-clipboard": "~3.3.1",
     "events": "~3.3.0",
-    "html-to-react": "~1.4.5",
+    "html-to-react": "~1.5.0",
     "immer": "9.0.6",
     "memoize-one": "~5.2.1",
     "nanoid": "3.1.32",

packages/react-components/package.json

@@ -40,7 +40,7 @@
     "@fluentui/react": "~8.98.3",
     "@internal/acs-ui-common": "1.3.2-beta.1",
     "copy-to-clipboard": "~3.3.1",
-    "html-to-react": "~1.4.5",
+    "html-to-react": "~1.5.0",
     "react-aria-live": "^2.0.5",
     "react-linkify": "^1.0.0-alpha",
     "uuid": "^8.1.0"

packages/storybook/.storybook/main.js

@@ -21,6 +21,9 @@ module.exports = {
   // Speeds up webpack build time after every code change. Improvements of up
   // to 4-5 seconds can be seen. Comment if components don't render properly.
   typescript: { reactDocgen: 'react-docgen' },
+  core: {
+    builder: 'webpack5',
+  },
   addons: [
     '@storybook/addon-links',
     {

packages/storybook/package.json

@@ -53,6 +53,8 @@
     "@storybook/addon-essentials": "~6.5.7",
     "@storybook/addon-links": "~6.5.7",
     "@storybook/addon-storyshots": "~6.5.7",
+    "@storybook/builder-webpack5": "6.5.12",
+    "@storybook/manager-webpack5": "6.5.12",
     "@storybook/node-logger": "~6.5.7",
     "@storybook/react": "~6.5.7",
     "@storybook/storybook-deployer": "~2.8.10",

packages/storybook/stories/Setup.stories.mdx

@@ -83,6 +83,15 @@ Should you want to update anything make sure that it is compatible with react ve
 
 ### Installing the Package
 
+#### Package prequiresites
+
+The Azure Communication UI Library supports the following minimum versions:
+
+- `typescript` >= 3.7.0
+- `webpack` >= 5.3.8
+
+#### npm install
+
 Use the `npm install` command to install the Azure Communication Services UI Library for JavaScript.
 
 ```bash

packages/storybook/stories/Troubleshooting.stories.mdx

@@ -61,3 +61,22 @@ by `npm add`.
 ```
 PS C:\tmp\acs\my-react-app> npm add --legacy-peer-deps @azure/communication-react
 ```
+
+## Project build errors
+
+### Webpack ERROR Unexpected token: `export * as`
+
+```
+ERROR in /.../htmlparser2@8.0.1/node_modules/htmlparser2/lib/esm/index.js 59:9
+Module parse failed: Unexpected token (59:9)
+You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
+|     return getFeed(parseDOM(feed, options));
+| }
+> export * as DomUtils from "domutils";
+| // Old name for DomHandler
+| export { DomHandler as DefaultHandler };
+```
+
+This issue will occur when using `@azure/communication-react` with a webpack version < 5.
+The best course of action is to upgrade your webpack version to 5.
+If this is not possible take a look at these workarounds: https://github.com/fb55/htmlparser2/issues/1237#issuecomment-1182522861.

tools/check-treeshaking/package.json

@@ -26,6 +26,9 @@
     "@internal/calling-component-bindings": "1.3.2-beta.1"
   },
   "devDependencies": {
+    "@babel/core": "~7.16.0",
+    "@babel/plugin-proposal-export-namespace-from": "~7.16.0",
+    "babel-loader": "8.1.0",
     "eslint": "^7.7.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-prettier": "^3.1.4",

tools/check-treeshaking/webpack.config.js

@@ -19,6 +19,18 @@ module.exports = {
           }
         ],
         exclude: /node_modules/
+      },
+      {
+        // Loader required due to: https://github.com/fb55/htmlparser2/issues/1237#issuecomment-1182522861
+        test: /htmlparser2\/lib\/esm\/index.js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              plugins: ['@babel/plugin-proposal-export-namespace-from']
+            }
+          }
+        ]
       }
     ]
   },