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/rollup@4.52.5/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
web:build: at error (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/rollup@4.52.5/node_modules/rollup/dist/es/shared/parseAst.js:397:42)
web:build: at Module.error (file:///Users/surajsuthar/Desktop/work/cointracker/node_modules/.pnpm/rollup@4.52.5/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/rollup@4.52.5/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/rollup@4.52.5/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/rollup@4.52.5/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/rollup@4.52.5/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/rollup@4.52.5/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/rollup@4.52.5/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/rollup@4.52.5/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/react-tweet@3.2.2_react-dom@19.2.0_react@19.2.0__react@19.2.0/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} />;
};
im using react router and it fails on build
this is vite config file
twitter-client.tsx