Does not play nicely with Next.js App Directory

[James Singleton]

This library started giving the following error when used in the app directory

DynamicServerError: Dynamic server usage: no-store fetch https://cdn.syndication.twimg.com/tweet-result?id=1631369196163440648&lang=en&features=tfw_timeline_list%3A%3Btfw_follower_count_sunset%3Atrue%3Btfw_tweet_edit_backend%3Aon%3Btfw_refsrc_session%3Aon%3Btfw_show_business_verified_badge%3Aon%3Btfw_duplicate_scribes_to_settings%3Aon%3Btfw_show_blue_verified_badge%3Aon%3Btfw_legacy_timeline_sunset%3Atrue%3Btfw_show_gov_verified_badge%3Aon%3Btfw_show_business_affiliate_badge%3Aon%3Btfw_tweet_edit_frontend%3Aon /[slug]
    at /Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/server/lib/patch-fetch.js:261:37
    at /Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/server/lib/trace/tracer.js:108:36
    at NoopContextManager.with (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7057)
    at ContextAPI.with (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:516)
    at NoopTracer.startActiveSpan (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18086)
    at ProxyTracer.startActiveSpan (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18847)
    at /Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/server/lib/trace/tracer.js:97:107
    at NoopContextManager.with (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7057)
    at ContextAPI.with (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:516)
    at NextTracerImpl.trace (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/server/lib/trace/tracer.js:97:32)
    at globalThis.fetch (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/next/dist/server/lib/patch-fetch.js:31:47)
    at getTweet (webpack-internal:///(sc_server)/./node_modules/react-tweet/dist/api/get-tweet.js:38:23)
    at TweetContent (webpack-internal:///(sc_server)/./node_modules/react-tweet/dist/tweet.js:19:85)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1091:30)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1366:41)
    at Object.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:948:28)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:156:24)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1605:38)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1643:21)
    at Timeout.eval [as _onTimeout] (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:1188:28)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7) {
  digest: 'DYNAMIC_SERVER_USAGE'
}

This is how I am using it in my application

import Image from 'next/image'
import {
  PortableText,
  PortableTextComponents,
} from '@portabletext/react'
import { PortableTextBlock } from 'sanity'
import { Tweet } from 'react-tweet'

const TweetComponents: TweetComponents = {
  AvatarImg: (props) => <Image {...props} alt={props.alt} />,
  MediaImg: (props) => <Image {...props} alt={props.alt} fill unoptimized />,
}

export function CustomPortableText({
  value,
}: {
  value: PortableTextBlock[]
}) {
  const components: PortableTextComponents = {
    types: {
      twitter: ({ value }) => {
        return (
          <div className="not-prose flex items-center justify-center">
            <Tweet id={value.id} components={TweetComponents} />
          </div>
        )
      },
    },
  }

  return <PortableText components={components} value={value} />
}

[Ty Carlson]

What version of react-tweet do you have installed? I think this issue was fixed in this PR for this similar issue. Has not been released yet though...

Maybe @lfades or @leerob have some insight on when a new release will be published that has this fix in it? I've seen others are still waiting on the current v2.0.1 to get published to NPM as well.

[James Singleton]

Ah I have the latest that's on NPM. I'm waiting for another fix to be released as well. Hopefully they can get it release and I'll check it out. I just randomly started having this issue so I wasn't 100% certain what was causing it.

Update: I confirmed I have "react-tweet": "^2.0.0", in my package.json.

I am also waiting for this PR to be released but it looks like it didn't even create a release in GitHub.

[Luis Alvarez D.]

Should be up now: https://www.npmjs.com/package/react-tweet. I'm sorry for the delay! and yes the release action is broken (the action itself is not failing but the token it's using is invalid). The ownership of the package is being moved to the vercel npm org and we'll have a new token for it!