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..9bcc6c261cda
--- /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>;
+};
\ No newline at end of file
diff --git a/code/addons/docs/template/stories/stories-mdx/raw-source.non-stories.js b/code/addons/docs/template/stories/stories-mdx/raw-source.non-stories.js
new file mode 100644
index 000000000000..358f4c64d7bd
--- /dev/null
+++ b/code/addons/docs/template/stories/stories-mdx/raw-source.non-stories.js
@@ -0,0 +1,15 @@
+import { RawSource as RawSourceComponent } from './RawSource.jsx';
+// eslint-disable-next-line import/no-unresolved
+import RawSourceCode from './RawSource.jsx?raw';
+
+export const RawSource = RawSourceComponent.bind({});
+
+RawSource.parameters = {
+  docs: {
+    source: {
+      code: RawSourceCode,
+      language: 'tsx',
+      type: 'code',
+    },
+  },
+};
\ No newline at end of file
diff --git a/code/addons/docs/template/stories/stories-mdx/raw-source.stories.mdx b/code/addons/docs/template/stories/stories-mdx/raw-source.stories.mdx
new file mode 100644
index 000000000000..472febb7d053
--- /dev/null
+++ b/code/addons/docs/template/stories/stories-mdx/raw-source.stories.mdx
@@ -0,0 +1,9 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import * as stories from './raw-source.non-stories';
+import { RawSource } from './RawSource';
+
+<Meta component={RawSource} />
+
+<Canvas>
+  <Story story={stories.RawSource} />
+</Canvas>
\ No newline at end of file
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],
   };