facing a webpack error when using with the new version of SharePoint

I am trying to use the webchat package with the new share point version (setup using https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment) after installation I am facing the following webpack related problem

`[13:51:14] Error - [webpack] 'dist': ./node_modules/htmlparser2/lib/esm/index.js 48:9 Module parse failed: Unexpected token (48: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 | They should probably be removed eventually. | /

export * as ElementType from "domelementtype"; | import { getFeed } from "domutils"; | export { getFeed } from "domutils"; @ ./node_modules/sanitize-html/index.js 1:19-41 @ ./node_modules/botframework-webchat/lib/renderMarkdown.js @ ./node_modules/botframework-webchat/lib/index.js @ ./lib/webparts/helloDemo/components/HelloDemo.js @ ./lib/webparts/helloDemo/HelloDemoWebPart.js `

This is a vanila installation of sharepoint and botframework webchat. my package.jon looks like "dependencies": { "@microsoft/sp-core-library": "1.15.2", "@microsoft/sp-lodash-subset": "1.15.2", "@microsoft/sp-office-ui-fabric-core": "1.15.2", "@microsoft/sp-property-pane": "1.15.2", "@microsoft/sp-webpart-base": "1.15.2", "botframework-webchat": "^4.15.9", "office-ui-fabric-react": "7.185.7", "react": "16.13.1", "react-dom": "16.13.1", "tslib": "2.3.1" }, "devDependencies": { "@microsoft/eslint-config-spfx": "1.15.2", "@microsoft/eslint-plugin-spfx": "1.15.2", "@microsoft/rush-stack-compiler-4.5": "0.2.2", "@microsoft/sp-build-web": "1.15.2", "@microsoft/sp-module-interfaces": "1.15.2", "@rushstack/eslint-config": "2.5.1", "@types/react": "16.9.51", "@types/react-dom": "16.9.8", "@types/webpack-env": "~1.15.2", "ajv": "^6.12.5", "eslint-plugin-react-hooks": "4.3.0", "gulp": "4.0.2", "typescript": "4.5.5" } and the webpart is simple ` const [token, setToken] = useState('');

useEffect(() =>
{
  const loadToken = async (): Promise<void> =>
  {
    const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
    const { token } = await res.json();
    setToken(token);
  };
  loadToken().then(()=> console.log('token loaded')).catch(console.error);
  return () =>
  {
    console.log('unmount');
   // setToken('');
  };
}, []);

microsoft / spfx-react-webchat

facing a webpack error when using with the new version of SharePoint #64