"useTweet" is not exported

[Surajsuthar]

im using react router and it fails on build

web:build: file: /Users/surajsuthar/Desktop/work/cointracker/apps/web/app/components/design/twitter-client.tsx:4:9
web:build: 
web:build: 2: 
web:build: 3: import type { TweetProps } from "react-tweet";
web:build: 4: import { useTweet } from "react-tweet";
web:build:             ^
web:build: 5: import { TweetComponent, TweetNotFound, TweetSkeleton } from "./tweet-card";
web:build: 
web:build:     at getRollupError (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
web:build:     at error (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:397:42)
web:build:     at Module.error (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:16939:16)
web:build:     at Module.traceVariable (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17391:29)
web:build:     at ModuleScope.findVariable (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:15061:39)
web:build:     at ReturnValueScope.findVariable (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5642:38)
web:build:     at FunctionBodyScope.findVariable (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5642:38)
web:build:     at Identifier.bind (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5413:40)
web:build:     at CallExpression.bind (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2804:23)
web:build:     at CallExpression.bind (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:12108:15) {
web:build:   binding: 'useTweet',
web:build:   code: 'MISSING_EXPORT',
web:build:   exporter: '/Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-tweet/dist/index.client.js',
web:build:   id: '/Users/surajsuthar/Desktop/work/cointracker/apps/web/app/components/design/twitter-client.tsx',
web:build:   url: 'https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module',
web:build:   pos: 64,

this is vite config file

import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [tailwindcss(), tsconfigPaths(), reactRouter()],
  optimizeDeps: {
    exclude: ["@resvg/resvg-js"],
  },
  ssr: {
    noExternal: ["react-tweet"],
  },
});

twitter-client.tsx

"use client";

import type { TweetProps } from "react-tweet";
import { useTweet } from "react-tweet";
import { TweetComponent, TweetNotFound, TweetSkeleton } from "./tweet-card";

export const TweetCard = ({
  id,
  apiUrl,
  className,
  fallback = <TweetSkeleton />,
  fetchOptions,
  onError,
}: TweetProps & { className?: string }) => {
  const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions);

  if (isLoading) {
    return fallback;
  }

  if (error || !data) {
    if (onError) {
      onError(error);
    }
    return <TweetNotFound />;
  }

  return <TweetComponent className={className} tweet={data} />;
};

[Surajsuthar]

✓ 155 modules transformed.
✗ Build failed in 2.67s
web:build: app/components/design/twitter-client.tsx (4:9): "useTweet" is not exported by "../../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-tweet/dist/index.client.js", imported by "app/components/design/twitter-client.tsx".
web:build: file: /Users/surajsuthar/Desktop/work/cointracker/apps/web/app/components/design/twitter-client.tsx:4:9
web:build: 
web:build: 2: 
web:build: 3: import type { TweetProps } from "react-tweet";
web:build: 4: import { useTweet } from "react-tweet";
web:build:             ^
web:build: 5: import { TweetComponent, TweetNotFound, TweetSkeleton } from "./tweet-card";
web:build: 
web:build:     at getRollupError (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
web:build:     at error (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:397:42)
web:build:     at Module.error (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:16939:16)
web:build:     at Module.traceVariable (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17391:29)
web:build:     at ModuleScope.findVariable (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:15061:39)
web:build:     at ReturnValueScope.findVariable (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5642:38)
web:build:     at FunctionBodyScope.findVariable (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5642:38)
web:build:     at Identifier.bind (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5413:40)
web:build:     at CallExpression.bind (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2804:23)
web:build:     at CallExpression.bind (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:12108:15) {
web:build:   binding: 'useTweet',
web:build:   code: 'MISSING_EXPORT',
web:build:   exporter: '/Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-tweet/dist/index.client.js',
web:build:   id: '/Users/surajsuthar/Desktop/work/cointracker/apps/web/app/components/design/twitter-client.tsx',
web:build:   url: 'https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module',
web:build:   pos: 64,
web:build:   loc: {
web:build:     column: 9,
web:build:     file: '/Users/surajsuthar/Desktop/work/cointracker/apps/web/app/components/design/twitter-client.tsx',
web:build:     line: 4
web:build:   },
web:build:   frame: '2: \n' +
web:build:     '3: import type { TweetProps } from "react-tweet";\n' +
web:build:     '4: import { useTweet } from "react-tweet";\n' +
web:build:     '            ^\n' +
web:build:     '5: import { TweetComponent, TweetNotFound, TweetSkeleton } from "./tweet-card";',
web:build:   watchFiles: [