@azuro-org/dictionaries requires direct import for @apollo/client

[camdengrieh]

I am using the latest version of the SDK and my stack is Typescript NextJs.

When loading the dApp the following error is thrown...

"SyntaxError: Named export 'gql' not found. The requested module '@apollo/client' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from '@apollo/client'; const {O: ODDS_DECIMALS,a: configRef,M: MAX_UINT_256,D: DEFAULT_DEADLINE}from'./config.js';export{c: chainsData}from'./config.js';import {u: useChain}from'./chainContext.js';export{C: ChainProvider}from'./chainContext.js';import {useMemo,useEffect,useState}from'react';import {gql,useQuery,useApolloClient}from'@apollo/client';import {getMarketName,getSelectionName,dictionaries,getMarketKey,getMarketDescription}from'@azuro-org/dictionaries';import {useAccount,useBalance,usePublicClient,useContractRead,useContractEvent,erc20ABI,useContractWrite,useWaitForTransaction}from'wagmi';import {parseUnits,decodeEventLog,formatUnits,encodeAbiParameters,parseAbiParameters} = pkg;"

import { useEffect, useState } from "react";
import type { AppProps } from "next/app";
import { ChainProvider } from "@azuro-org/sdk";
import { ApolloProvider } from "@azuro-org/sdk/nextjs/apollo";
import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";
import NextNProgress from "nextjs-progressbar";
import { Toaster } from "react-hot-toast";
import { useDarkMode } from "usehooks-ts";
import { polygonMumbai } from "viem/chains";
import { WagmiConfig } from "wagmi";
import { Footer } from "~~/components/Footer";
import { Header } from "~~/components/Header";
import { BlockieAvatar } from "~~/components/scaffold-eth";
import { useNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
import { useGlobalState } from "~~/services/store/store";
import { wagmiConfig } from "~~/services/web3/wagmiConfig";
import { appChains } from "~~/services/web3/wagmiConnectors";
import "~~/styles/globals.css";

const WinXyzApp = ({ Component, pageProps }: AppProps) => {
  const price = useNativeCurrencyPrice();
  const setNativeCurrencyPrice = useGlobalState(state => state.setNativeCurrencyPrice);

  useEffect(() => {
    if (price > 0) {
      setNativeCurrencyPrice(price);
    }
  }, [setNativeCurrencyPrice, price]);

  return (
    <>
      <div className="flex flex-col min-h-screen">
        <Header />
        <main className="relative flex flex-col flex-1">
          <Component {...pageProps} />
        </main>
        <Footer />
      </div>
      <Toaster />
    </>
  );
};

const WinXyzAppWithProviders = (props: AppProps) => {
  // This variable is required for initial client side rendering of correct theme for RainbowKit
  const [isDarkTheme, setIsDarkTheme] = useState(true);
  const { isDarkMode } = useDarkMode();
  useEffect(() => {
    setIsDarkTheme(isDarkMode);
  }, [isDarkMode]);

  return (
    <WagmiConfig config={wagmiConfig}>
      <ChainProvider initialChainId={polygonMumbai.id}>
        <NextNProgress />
        <RainbowKitProvider
          chains={appChains.chains}
          avatar={BlockieAvatar}
          theme={isDarkTheme ? darkTheme() : lightTheme()}
        >
          <ApolloProvider>
            <WinXyzApp {...props} />
          </ApolloProvider>
        </RainbowKitProvider>
      </ChainProvider>
    </WagmiConfig>
  );
};

export default WinXyzAppWithProviders;

[camdengrieh]

To temporarily fix this I have had to change the imports of the modules for @apollo/client

import pkg from "@apollo/client"; const { ApolloLink, HttpLink } = pkg;

How come the package doesn't come with the tsconfig?

[on47sky]

Hi @camdengrieh! It's an issue with apollo package and ESM projects. These imports are generated by codegen. Our example NextJS project works fine with it. If it's acceptable for you, try to change your project to common js, or see https://github.com/apollographql/apollo-client/issues/9976 to solve the issue in ESM project