diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 1374344f..437f9c60 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -3,7 +3,7 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 ---
 
 <script>
-  import { DatePicker, DatePickerSkeleton, DatePickerInput } from "carbon-components-svelte";
+  import { DatePicker, DatePickerSkeleton, DatePickerInput, InlineNotification } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -63,6 +63,15 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### Single
 
+<InlineNotification
+  svx-ignore
+  lowContrast
+  title="Note:"
+  subtitle="If using Rollup, specify `inlineDynamicImports: true` in your `rollup.config.js`."
+  kind="info"
+  hideCloseButton
+/>
+
 <FileSource src="/framed/DatePicker/DatePickerSingle" />
 
 ### Range
diff --git a/examples/rollup/rollup.config.js b/examples/rollup/rollup.config.js
index 471eb1ed..000f26b8 100644
--- a/examples/rollup/rollup.config.js
+++ b/examples/rollup/rollup.config.js
@@ -9,6 +9,7 @@ const production = !process.env.ROLLUP_WATCH;
 
 export default {
   input: "src/index.js",
+  inlineDynamicImports: true,
   output: {
     sourcemap: !production,
     format: "iife",