diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
index a5f99fd51864..13c1a251cebe 100644
--- a/code/frameworks/nextjs/src/config/webpack.ts
+++ b/code/frameworks/nextjs/src/config/webpack.ts
@@ -17,6 +17,8 @@ export const configureConfig = async ({
   const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir });
 
   addScopedAlias(baseConfig, 'next/config');
+  addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
+  addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
   setupRuntimeConfig(baseConfig, nextConfig);
 
   return nextConfig;
diff --git a/code/ui/blocks/src/components/Story.tsx b/code/ui/blocks/src/components/Story.tsx
index 2718197456f1..089df560b2d8 100644
--- a/code/ui/blocks/src/components/Story.tsx
+++ b/code/ui/blocks/src/components/Story.tsx
@@ -64,9 +64,6 @@ const InlineStory: FunctionComponent<InlineStoryProps> = (props) => {
     };
   }, [autoplay, renderStoryToElement, story]);
 
-  // We do this so React doesn't complain when we replace the span in a secondary render
-  const htmlContents = `<span></span>`;
-
   if (error) {
     return (
       <pre>
@@ -83,13 +80,7 @@ const InlineStory: FunctionComponent<InlineStoryProps> = (props) => {
         )} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
       ) : null}
       {showLoader && <StorySkeleton />}
-      <div
-        ref={storyRef}
-        id={`${storyBlockIdFromId(props)}-inner`}
-        data-name={story.name}
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: htmlContents }}
-      />
+      <div ref={storyRef} id={`${storyBlockIdFromId(props)}-inner`} data-name={story.name} />
     </>
   );
 };