diff --git a/packages/materialdesign-components/rollup.config.js b/packages/materialdesign-components/rollup.config.js
index ce1db3f707..263ee81d66 100644
--- a/packages/materialdesign-components/rollup.config.js
+++ b/packages/materialdesign-components/rollup.config.js
@@ -1,6 +1,7 @@
 import svelte from "rollup-plugin-svelte"
 import postcss from "rollup-plugin-postcss"
 import resolve from "rollup-plugin-node-resolve"
+import commonjs from "rollup-plugin-commonjs"
 
 const postcssOptions = () => ({
   extensions: [".scss", ".sass"],
@@ -16,6 +17,10 @@ const postcssOptions = () => ({
   ],
 })
 
+const coreExternal = [
+  "shortid",
+]
+
 export default {
   input: "src/index.js",
   output: [
@@ -30,7 +35,18 @@ export default {
     svelte({
       hydratable: true,
     }),
-    resolve(),
+    resolve({
+      preferBuiltins: true,
+      browser: true,
+      dedupe: importee => {
+        return coreExternal.includes(importee)
+      },
+    }),
+    commonjs({
+      namedExports: {
+        shortid: ["generate"],
+      },
+    }),
     postcss(postcssOptions()),
   ],
 }
diff --git a/packages/materialdesign-components/src/List/ListItem.svelte b/packages/materialdesign-components/src/List/ListItem.svelte
index ecaf0cefd1..775d73d2e2 100644
--- a/packages/materialdesign-components/src/List/ListItem.svelte
+++ b/packages/materialdesign-components/src/List/ListItem.svelte
@@ -3,7 +3,7 @@
   import { Radiobutton } from "../Radiobutton"
   import { Checkbox } from "../Checkbox"
   import ClassBuilder from "../ClassBuilder.js"
-  import shortid from "shortid"
+  import { generate } from "shortid"
 
   const cb = new ClassBuilder("list-item")
 
@@ -28,7 +28,7 @@
   let role = "option"
 
   onMount(() => {
-    _id = shortid.generate()
+    _id = generate()
 
     selectedItems = _bb.getContext("BBMD:list:selectItemStore")