Getting "Client not specified" message

Hey ! I’m new to URQL and got a problem trying to use it with NextJS; it doesn’t seems to take into account my client config into the Provider.

Console message:

Default Client: No client has been specified using urql’s Provider.This means that urql will be falling back to defaults including making requests to /graphql. If that’s not what you want, please create a client and add a Provider.

Couldn’t find anything about this issue on the web. Did I miss a step about configuration ?

I’ve generated my nextJS app with “with-ant-design-less” config if it can help also.

Thanks for your help !

urql version & exchanges: Urql v1.10.0 Next v9.5.3

My _app.tsx:

// import App from "next/app";
import type { AppProps /*, AppContext */ } from 'next/app'
import React from 'react';
import {
    Layout as LayoutAD,
    Menu,
    Button,
    Space,
} from 'antd';
import { HomeFilled, SearchOutlined, UserOutlined } from '@ant-design/icons';
import { Provider, createClient } from 'urql';

const client = createClient({
  url: 'http://localhost:4000/graphql',
  fetchOptions: {
    credentials: 'include',
  },
});

const { Header, Content, Sider } = LayoutAD;

import '../styles/components/layout.less';


function MyApp({ Component, pageProps }: AppProps) {
        return (
          <Provider value={client}>
            <LayoutAD style={{ minHeight: '100vh', overflow: 'auto' }}>
            <Sider
              breakpoint="lg"
              collapsedWidth="0"
              onBreakpoint={broken => {
                console.log(broken);
              }}
              onCollapse={(collapsed, type) => {
                console.log(collapsed, type);
              }}
            >
              {/* <div className="logo" /> */}
              <div className="logo" style={{color: 'white', fontSize: '2rem', textAlign: 'center' }}>Dylt</div>
              <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                <Menu.Item key="1" icon={<HomeFilled />}>
                  Accueil
                  
                </Menu.Item>
                <Menu.Item key="2" icon={<SearchOutlined />}>
                  Explorer
                </Menu.Item>
                <Menu.Item key="3" icon={<UserOutlined />}>
                  Mon profil
                </Menu.Item>
              </Menu>
            </Sider>
            <LayoutAD>
              <Header className="site-layout-sub-header-background">
                  <Space>
                  <Button>Inscription</Button>
                  <Button type="primary">Connexion</Button>
                  </Space>
              </Header>
              <Content style={{ margin: '24px 16px 0' }}>
                <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                    <Component {...pageProps} />
                </div>
              </Content>
            </LayoutAD>
          </LayoutAD>
          </Provider>
        );
};

export default MyApp;

[kitten]

@geisterfurz007 what’s important to note here is, while preventing a hoist here may have worked for now, Yarn generally tends to duplicate dependencies on upgrades or additional installs. The peer-dependency in next-urql specifically means that it’s supposed to use whichever version you’ve installed though. More importantly these issues can sometimes cause @urql/Core to be duplicated which leads to more severe issues.

That’s why we recommend instead to check for duplicates with yarn list --pattern=urql. If any nested duplicates come up then the lock file can often simply be fixed using npx yarn-deduplicate. So, no nohoist should be necessary for any urql packages.

[quentinbrohan]

@kitten That was it, thanks ! Forgot to use withUrqlClient on export of my registration page.