diff --git a/apps/pigment-css-next-app/src/app/grid/page.tsx b/apps/pigment-css-next-app/src/app/grid/page.tsx
index 52c27519..7c5070e8 100644
--- a/apps/pigment-css-next-app/src/app/grid/page.tsx
+++ b/apps/pigment-css-next-app/src/app/grid/page.tsx
@@ -13,7 +13,7 @@ const Item = styled.div`
 
 function GridDemo1() {
   return (
-    <Grid container spacing={2}>
+    <Grid container spacing={2} sx={{ color: '#070707' }}>
       <Grid size={8}>
         <Item>size=8</Item>
       </Grid>
diff --git a/packages/pigment-css-react/src/css.js b/packages/pigment-css-react/src/css.js
index 39cdb04d..755ea0ac 100644
--- a/packages/pigment-css-react/src/css.js
+++ b/packages/pigment-css-react/src/css.js
@@ -1,4 +1,12 @@
+/**
+ * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw.
+ * So during eval phase, it can happen that some code is calling the runtime function.
+ * We do not want to throw error in that case as we want the evaluation to happen.
+ */
 export default function css() {
+  if (typeof __wyw_dynamic_import !== 'undefined') {
+    return;
+  }
   throw new Error(
     `${process.env.PACKAGE_NAME}: You were trying to call "css" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`,
   );
diff --git a/packages/pigment-css-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js
index b78ccfd6..2db31e7c 100644
--- a/packages/pigment-css-react/src/generateAtomics.js
+++ b/packages/pigment-css-react/src/generateAtomics.js
@@ -1,6 +1,14 @@
 import cx from 'clsx';
 
+/**
+ * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw.
+ * So during eval phase, it can happen that some code is calling the runtime function.
+ * We do not want to throw error in that case as we want the evaluation to happen.
+ */
 export function generateAtomics() {
+  if (typeof __wyw_dynamic_import !== 'undefined') {
+    return;
+  }
   throw new Error(
     `${process.env.PACKAGE_NAME}: You were trying to call "generateAtomics" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`,
   );
diff --git a/packages/pigment-css-react/src/globalCss.js b/packages/pigment-css-react/src/globalCss.js
index 65e0cfca..38b43837 100644
--- a/packages/pigment-css-react/src/globalCss.js
+++ b/packages/pigment-css-react/src/globalCss.js
@@ -1,4 +1,12 @@
+/**
+ * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw.
+ * So during eval phase, it can happen that some code is calling the runtime function.
+ * We do not want to throw error in that case as we want the evaluation to happen.
+ */
 export default function globalCss() {
+  if (typeof __wyw_dynamic_import !== 'undefined') {
+    return;
+  }
   throw new Error(
     `${process.env.PACKAGE_NAME}: You were trying to call "globalCss" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`,
   );
diff --git a/packages/pigment-css-react/src/keyframes.js b/packages/pigment-css-react/src/keyframes.js
index 197d509e..1dc7df6c 100644
--- a/packages/pigment-css-react/src/keyframes.js
+++ b/packages/pigment-css-react/src/keyframes.js
@@ -1,4 +1,12 @@
+/**
+ * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw.
+ * So during eval phase, it can happen that some code is calling the runtime function.
+ * We do not want to throw error in that case as we want the evaluation to happen.
+ */
 export default function keyframes() {
+  if (typeof __wyw_dynamic_import !== 'undefined') {
+    return;
+  }
   throw new Error(
     `${process.env.PACKAGE_NAME}: You were trying to call "keyframes" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`,
   );
diff --git a/packages/pigment-css-react/src/useTheme.js b/packages/pigment-css-react/src/useTheme.js
index 527eb6df..a3f91f53 100644
--- a/packages/pigment-css-react/src/useTheme.js
+++ b/packages/pigment-css-react/src/useTheme.js
@@ -1,4 +1,12 @@
+/**
+ * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw.
+ * So during eval phase, it can happen that some code is calling the runtime function.
+ * We do not want to throw error in that case as we want the evaluation to happen.
+ */
 export default function useTheme() {
+  if (typeof __wyw_dynamic_import !== 'undefined') {
+    return;
+  }
   throw new Error(
     `${process.env.PACKAGE_NAME}: You were trying to call "useTheme" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`,
   );