Bundle ShikiJS for Webpack 4 (#5349)

* Bundle ShikiJS for Webpack 4

* Add entry

* Use named exports

Author: compulim

CHANGELOG.md

@@ -102,6 +102,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Fixes [#5319](https://github.com/microsoft/BotFramework-WebChat/issues/5319). Some Markdown text are not rendered after HTML tags, in PR [#5320](https://github.com/microsoft/BotFramework-WebChat/pull/5320), by [@compulim](https://github.com/compulim)
 -  Fixes [#5323](https://github.com/microsoft/BotFramework-WebChat/issues/5323). Removed unused CSS class from carousel component, eliminating unintended styling, in PR [#5325](https://github.com/microsoft/BotFramework-WebChat/pull/5325), by [@OEvgeny](https://github.com/OEvgeny)
 -  Resolved CSS class name conflicts between component and fluent packages to prevent styling issues, in PR [#5326](https://github.com/microsoft/BotFramework-WebChat/pull/5326), in PR [#5327](https://github.com/microsoft/BotFramework-WebChat/pull/5327), by [@OEvgeny](https://github.com/OEvgeny)
+-  Fixed [#5350](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5350). Bundled `shiki` in component package, in PR [#5349](https://github.com/microsoft/BotFramework-WebChat/pull5349), by [@compulim](https://github.com/compulim)
 
 # Removed
 

packages/component/tsup.config.ts

@@ -6,19 +6,24 @@ import { decoratorStyleContent as decoratorStyleContentPlaceholder } from './src
 
 const config: typeof baseConfig = {
   ...baseConfig,
-  loader: {
-    ...baseConfig.loader,
-    '.css': 'local-css'
+  entry: {
+    'botframework-webchat-component': './src/index.ts',
+    'botframework-webchat-component.internal': './src/internal.ts',
+    'botframework-webchat-component.decorator': './src/decorator/index.ts'
   },
   esbuildPlugins: [
     injectCSSPlugin({ stylesPlaceholder: componentStyleContentPlaceholder }),
     injectCSSPlugin({ stylesPlaceholder: decoratorStyleContentPlaceholder })
   ],
-  entry: {
-    'botframework-webchat-component': './src/index.ts',
-    'botframework-webchat-component.internal': './src/internal.ts',
-    'botframework-webchat-component.decorator': './src/decorator/index.ts'
-  }
+  loader: {
+    ...baseConfig.loader,
+    '.css': 'local-css'
+  },
+  noExternal: [
+    // Belows are the dependency chain related to "regex" where it is named export-only and does not work on Webpack 4/PPUX (CJS cannot import named export).
+    // Webpack 4: "Can't import the named export 'rewrite' from non EcmaScript module (only default export is available)"
+    'shiki', // shiki -> @shikijs/core -> @shikijs/engine-javascript -> regex
+  ]
 };
 
 export default defineConfig([