Fixed missing component name in code examples.

Author: Hyperkid123

packages/react-renderer-demo/src/app/next.config.js

@@ -10,34 +10,33 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 module.exports = withBundleAnalyzer(
   withMDX({
-      pageExtensions: ['js', 'jsx', 'md', 'mdx'],
-      distDir: '../../dist/functions/next',
-      webpack: (config, options) => {
-        config.resolve.alias = {
-          ...config.resolve.alias,
-          react: path.resolve(__dirname, '../../../../node_modules/react'),
-          'react-dom': path.resolve(__dirname, '../../../../node_modules/react-dom'),
-          '@docs/doc-components': path.resolve(__dirname, './src/doc-components'),
-          '@docs/components': path.resolve(__dirname, './src/components'),
-          '@docs/pages': path.resolve(__dirname, './pages'),
-          '@docs/examples': path.resolve(__dirname, './examples'),
-          '@docs/list-of-contents': path.resolve(__dirname, './src/helpers/list-of-contents'),
-          '@docs/code-example': path.resolve(__dirname, './src/components/code-example'),
-          '@docs/hooks': path.resolve(__dirname, './src/hooks')
-        };
+    pageExtensions: ['js', 'jsx', 'md', 'mdx'],
+    distDir: '../../dist/functions/next',
+    webpack: (config, options) => {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        react: path.resolve(__dirname, '../../../../node_modules/react'),
+        'react-dom': path.resolve(__dirname, '../../../../node_modules/react-dom'),
+        '@docs/doc-components': path.resolve(__dirname, './src/doc-components'),
+        '@docs/components': path.resolve(__dirname, './src/components'),
+        '@docs/pages': path.resolve(__dirname, './pages'),
+        '@docs/examples': path.resolve(__dirname, './examples'),
+        '@docs/list-of-contents': path.resolve(__dirname, './src/helpers/list-of-contents'),
+        '@docs/code-example': path.resolve(__dirname, './src/components/code-example'),
+        '@docs/hooks': path.resolve(__dirname, './src/hooks')
+      };
 
-        config.optimization.minimizer = [
-          new TerserPlugin({
-            cache: true,
-            parallel: false,
-            terserOptions: {
-          keep_classnames: true, // eslint-disable-line
-          keep_fnames: true, // eslint-disable-line
-            }
-          })
-        ];
-        return config;
-      }
+      config.optimization.minimizer = [
+        new TerserPlugin({
+          cache: true,
+          parallel: false,
+          terserOptions: {
+            keep_classnames: true, // eslint-disable-line camelcase
+            keep_fnames: true // eslint-disable-line camelcase
+          }
+        })
+      ];
+      return config;
     }
-  )
+  })
 );

packages/react-renderer-demo/src/app/src/components/code-example.js

@@ -133,9 +133,19 @@ const getPayload = (type, code, sourceFiles = {}) =>
     }
   });
 
-const CodeExample = ({ source, mode, mapper, additionalSources }) => {
-  const { current: Component } = useRef(mode === 'preview' ? dynamic(import(`@docs/examples/${source}`)) : Fragment);
+const CodeExample = ({ source, mode, mapper }) => {
+  const [name, setName] = useState('');
   const [codeSource, setCodeSource] = useState('');
+  const { current: Component } = useRef(
+    mode === 'preview'
+      ? dynamic(
+          import(`@docs/examples/${source}`).then((mod) => {
+            setName(mod.default.name);
+            return mod;
+          })
+        )
+      : Fragment
+  );
   const sourceFiles = [];
   useEffect(() => {
     import(`!raw-loader!@docs/examples/${source}`).then((file) => {
@@ -160,7 +170,7 @@ const CodeExample = ({ source, mode, mapper, additionalSources }) => {
             >
               {Component && (
                 <Typography className={classes.heading} component="h4" variant="h3">
-                  {Component.name}
+                  {name}
                 </Typography>
               )}
               <Box display="flex">