Merge pull request #23671 from sookmax/nextjs-precompiled-react

NextJS: Aliases `react` and `react-dom` like `next.js` does

Author: ndelangen

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;

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} />
     </>
   );
 };