Remix(Vite)中.tsx文件无法导入@apollo/client的问题求助

核心问题原因 #

@apollo/client部分版本以CommonJS格式导出，在Vite的ESM环境中直接使用命名导入会出现兼容问题，全量导入又会导致React组件和gql标签函数无法正常工作。

分步解决方案 #

1. 修正root.tsx中的Apollo Client导入

按照错误提示的推荐方式，使用默认导入后解构的方式获取核心模块，避免命名导入和全量导入的问题：

import pkg from '@apollo/client';
const { ApolloClient, createHttpLink, InMemoryCache, ApolloProvider } = pkg;
import { LinksFunction } from "@remix-run/node";
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import styleLink from "~/tailwind.css?url";

export function Layout({ children }: { children: React.ReactNode }) {
  const graphQLClient = new ApolloClient({
    ssrMode: true, 
    link: createHttpLink({ 
      uri: 'https://countries.trevorblades.com/graphql', 
      headers: {
        'Access-Control-Allow-Origin': '*', 
      },
    }),
    cache: new InMemoryCache(), 
  });
  
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <ApolloProvider client={graphQLClient}>
          {children}
          <ScrollRestoration />
          <Scripts />
        </ApolloProvider>
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styleLink }
];

2. 修正queries.ts中的gql导入

同样使用默认导入解构的方式获取gql标签函数，避免全量导入导致的“不是函数”错误：

import pkg from '@apollo/client';
const { gql } = pkg;

export const GET_ALL_NOTES = gql`
    query GetNotes {
        getNotes {
            title,
            content,
            uid,
        }
    }
`;

3. 可选：添加Vite优化配置（若上述方法仍有问题）

如果还是存在兼容问题，在vite.config.ts中添加优化配置，强制Vite正确处理@apollo/client的模块格式：

import { defineConfig } from '@remix-run/dev';
import vitePlugin from '@remix-run/vite';

export default defineConfig({
  plugins: [vitePlugin()],
  optimizeDeps: {
    include: ['@apollo/client'],
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
});

关键说明 #

• 避免使用import * as apollo from '@apollo/client'：React组件要求首字母大写的标识符，且全量导入的模块对象无法正确解析JSX组件；gql作为模板字面量标签，全量导入后会丢失函数绑定导致报错。
• 默认导入解构的方式是Vite官方提示的CommonJS模块兼容方案，能正确解析所有导出成员。

内容的提问来源于stack exchange，提问作者starter_dev