diff --git a/code/addons/docs/template/stories/stories-mdx/RawSource.jsx b/code/addons/docs/template/stories/stories-mdx/RawSource.jsx
new file mode 100644
index 000000000000..41cee7b217f1
--- /dev/null
+++ b/code/addons/docs/template/stories/stories-mdx/RawSource.jsx
@@ -0,0 +1,7 @@
+import React, { Fragment } from 'react';
+
+export const MY_VALUE_I_WANT_TO_SHOW_IN_STORY = 'Hello World!';
+
+export const RawSource = () => {
+  return <Fragment>{MY_VALUE_I_WANT_TO_SHOW_IN_STORY}</Fragment>;
+};
diff --git a/code/addons/docs/template/stories/stories-mdx/raw-source.stories.js b/code/addons/docs/template/stories/stories-mdx/raw-source.stories.js
new file mode 100644
index 000000000000..6a1d4991ddd8
--- /dev/null
+++ b/code/addons/docs/template/stories/stories-mdx/raw-source.stories.js
@@ -0,0 +1,19 @@
+import { RawSource as RawSourceComponent } from './RawSource.jsx';
+// eslint-disable-next-line import/no-unresolved
+import RawSourceCode from './RawSource.jsx?raw';
+
+export default {
+  component: RawSourceComponent,
+};
+
+export const RawSource = {
+  parameters: {
+    docs: {
+      source: {
+        code: RawSourceCode,
+        language: 'tsx',
+        type: 'code',
+      },
+    },
+  },
+};
diff --git a/code/builders/builder-webpack5/src/preview/loaders.ts b/code/builders/builder-webpack5/src/preview/loaders.ts
index 868d35ba394c..98e7dbd8efd9 100644
--- a/code/builders/builder-webpack5/src/preview/loaders.ts
+++ b/code/builders/builder-webpack5/src/preview/loaders.ts
@@ -20,6 +20,7 @@ export const createBabelLoader = async (
         options: babelOptions,
       },
     ],
+    resourceQuery: { not: [/raw/] },
     include: [getProjectRoot()],
     exclude: [/node_modules/, ...excludes],
   };