Adding Twitter library using dynamic imports.

Author: dcooney

components/atoms/TwitterEmbed/TwitterEmbed.js

@@ -1,8 +1,8 @@
+import RichText from '@/components/atoms/RichText'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
+import {TwitterTweetEmbed} from 'react-twitter-embed'
 import styles from './TwitterEmbed.module.css'
-import {useEffect, useRef} from 'react'
-import RichText from '@/components/atoms/RichText'
 
 /**
  * TwitterEmbed Block
@@ -15,39 +15,22 @@ import RichText from '@/components/atoms/RichText'
  * @return {Element}               The TwitterEmbed component.
  */
 export default function TwitterEmbed({className, caption, url}) {
-  const tweetRef = useRef(null)
-
-  useEffect(() => {
-    if (url === '') {
-      return
-    }
-    // @see https://stackoverflow.com/a/43268098/921927
-    const proxyUrl = 'https://cors-anywhere.herokuapp.com/',
-      targetUrl = `https://publish.twitter.com/oembed?url=${url}`
-    fetch(proxyUrl + targetUrl)
-      .then((response) => response.json())
-      .then((data) => {
-        if (data && data.html) {
-          // @see https://stackoverflow.com/a/43268098/921927
-          // Create slot for executing a script file.
-          const slotHtml = document
-            .createRange()
-            .createContextualFragment(data.html) // Create a 'tiny' document and parse the html string.
-          tweetRef.current.innerHTML = '' // Clear the container.
-          tweetRef.current.appendChild(slotHtml) // Append the new content.
-        }
-      })
-  }, [])
+  const tweetURL = url ? url.split('/') : '' // Split URL string into array.
+  const tweetId = tweetURL ? tweetURL[tweetURL.length - 1] : '' // Get ID from url array.
 
   return (
-    <div className={cn(styles.twitterEmbed, className)}>
-      <div ref={tweetRef}></div>
-      {!!caption && (
-        <div className={styles.caption}>
-          <RichText tag="span">{caption}</RichText>
+    <>
+      {!!tweetId && Number.isInteger(tweetId) && (
+        <div className={cn(styles.twitterEmbed, className)}>
+          <TwitterTweetEmbed tweetId={tweetId} />
+          {!!caption && (
+            <div className={styles.caption}>
+              <RichText tag="span">{caption}</RichText>
+            </div>
+          )}
         </div>
       )}
-    </div>
+    </>
   )
 }
 

components/blocks/Gutenberg/BlockEmbed/BlockEmbed.js

@@ -1,35 +1,48 @@
-import TwitterEmbed from '@/components/atoms/TwitterEmbed'
 import VideoEmbed from '@/components/atoms/VideoEmbed'
+import dynamic from 'next/dynamic'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, {useEffect, useState} from 'react'
+
+const Tweet = dynamic(() => import('@/components/atoms/TwitterEmbed'))
 
 /**
  * Embed Block
  *
  * The core Embed block from Gutenberg.
  *
  * @author WebDevStudios
- * @param {string} className        Optional classnames.
- * @param {string} url              The URL of the video.
- * @param {string} caption          Optional caption.
- * @param {string} align            Block alignment caption.
- * @param {string} providerNameSlug The type of embed.
- * @return {Element}                The component to embed.
+ * @param {object} props                  The component properties.
+ * @param {string} props.className        Optional classnames.
+ * @param {string} props.url              The URL of the video.
+ * @param {string} props.caption          Optional caption.
+ * @param {string} props.providerNameSlug The type of embed.
+ * @return {Element}                      The component to embed.
  */
 export default function BlockEmbed({
   className,
   url,
   caption,
   providerNameSlug
 }) {
+  const [loadTweet, setLoadTweet] = useState(0)
+  const supportedVideoTypes = ['youtube', 'vimeo']
+
+  useEffect(() => {
+    // Load Tweet library using Next Dynamic
+    // @see https://nextjs.org/docs/advanced-features/dynamic-import
+    if (providerNameSlug === 'twitter') {
+      setLoadTweet(1)
+    }
+  })
+
   return (
     <>
       {!!url && (
         <>
-          {providerNameSlug === 'twitter' ? (
-            <TwitterEmbed className={className} url={url} caption={caption} />
-          ) : (
-            // <div dangerouslySetInnerHTML={{__html: tweetContent}} />
+          {!!loadTweet && (
+            <Tweet className={className} url={url} caption={caption} />
+          )}
+          {!!supportedVideoTypes.includes(providerNameSlug) && (
             <VideoEmbed
               className={className}
               url={url}

package.json

@@ -42,6 +42,7 @@
     "next": "latest",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-twitter-embed": "^3.0.3",
     "yup": "^0.32.8"
   },
   "devDependencies": {