diff --git a/.eslintrc.js b/.eslintrc.js
index 0a3ad1dcff0..0cfd430c202 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -74,7 +74,12 @@ module.exports = {
     },
     {
       // this package uses pre-bundling, dependencies will be bundled, and will be in devDepenencies
-      files: ['**/lib/theming/**/*', '**/lib/router/**/*', '**/lib/ui/**/*'],
+      files: [
+        '**/lib/theming/**/*',
+        '**/lib/router/**/*',
+        '**/lib/ui/**/*',
+        '**/lib/components/**/*',
+      ],
       rules: {
         'import/no-extraneous-dependencies': 'off',
       },
diff --git a/lib/components/package.json b/lib/components/package.json
index 937b091f8cf..30056e19297 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -37,20 +37,25 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "ts-node ../../scripts/prebundle.ts"
   },
   "dependencies": {
-    "@popperjs/core": "^2.6.0",
     "@storybook/client-logger": "6.5.0-alpha.22",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
     "@storybook/theming": "6.5.0-alpha.22",
+    "core-js": "^3.8.2",
+    "regenerator-runtime": "^0.13.7"
+  },
+  "devDependencies": {
+    "@popperjs/core": "^2.6.0",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
     "color-convert": "^2.0.1",
-    "core-js": "^3.8.2",
+    "css": "^3.0.0",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
+    "jest": "^26.6.3",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.1.3",
     "memoizerific": "^1.11.3",
@@ -62,14 +67,10 @@
     "react-popper-tooltip": "^3.1.1",
     "react-syntax-highlighter": "^15.4.5",
     "react-textarea-autosize": "^8.3.0",
-    "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
+    "ts-node": "^10.4.0",
     "util-deprecate": "^1.0.2"
   },
-  "devDependencies": {
-    "css": "^3.0.0",
-    "jest": "^26.6.3"
-  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
@@ -77,6 +78,7 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundlerEntrypoint": "./src/index.ts",
   "gitHead": "fc1a84084556d61fea8bcaa197f7d85f3a9a107d",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/components/src/index.ts b/lib/components/src/index.ts
index c142453d854..54d8578b4ae 100644
--- a/lib/components/src/index.ts
+++ b/lib/components/src/index.ts
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./typings.d.ts" />
+
 import { createElement, forwardRef, ElementType } from 'react';
 import { components as rawComponents } from './typography/DocumentFormatting';
 
diff --git a/yarn.lock b/yarn.lock
index 2f3e44cf6f3..a0a61f067b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7495,6 +7495,7 @@ __metadata:
     react-textarea-autosize: ^8.3.0
     regenerator-runtime: ^0.13.7
     ts-dedent: ^2.0.0
+    ts-node: ^10.4.0
     util-deprecate: ^1.0.2
   peerDependencies:
     react: ^16.8.0 || ^17.0.0