Prod build error with urql React bindings on React 19 with rsbuild

[justin13888]

Describe the bug

I get the following error when doing prod builds in rsbuild from urql specifically when using React 19.

Although I don't get this issue when changing any of these variables (e.g. dev build, downgrading to React 18, same React components but compiled with Vite), I am submitting the issue here because of the type of error:

File: <...>/node_modules/urql/dist/urql.es.js:1:1
  × ESModulesLinkingError: export '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' (imported as 'r') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, act, cache, cloneElement, createContext, createElement, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_useCacheRefresh, use, useActionState, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition, version)
    ╭─[73:8]
 71 │ };
 72 │ 
 73 │ var p = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

It appears urql hooks into React's internal API for something which from my understanding is unsupported by the React team (reactjs/react.dev#3896 (comment)).

Wondering if there are any leads on how this could be resolved whether by urql or some other way?

Reproduction:
A simple code example from documentation suffices given that you are using rsbuild to compile React 19 triggers this error: https://commerce.nearform.com/open-source/urql/docs/basics/react-preact/

List of steps:

• Create rsbuild project with React 19 template: npm create rsbuild@latest

• cd into project

• npm install --save urql

• Modify src/App.tsx as follows:

  import './App.css';
  
  import { Client, Provider, cacheExchange, fetchExchange } from 'urql';
  
  const client = new Client({
    url: 'http://localhost:3000/graphql',
    exchanges: [cacheExchange, fetchExchange],
  });
  
  const App = () => {
    return (
      <Provider value={client}>    
        <div className="content">
          <h1>Rsbuild with React</h1>
          <p>Start building amazing things with Rsbuild.</p>
        </div>
      </Provider>
    );
  };
  
  export default App;

• npm run build

Reproduction

See above

Urql version

4.2.2

Validations

• I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
• Read the docs.
• Follow our Code of Conduct

[kitten]

We don't accept bugs for external bundlers' issues. While how we implement this check may happen to change, this isn't a bug in urql.

Wondering if there are any leads on how this could be resolved whether by urql or some other way?

Open an issue with rsbuild. react is not convertable to CommonJS cleanly and the internals property shows this best, especially, since packages looking to support multiple versions of React have to access multiple keys. Basically, namespace[key] should never be statically converted into a named import. This is an incorrect assumption by the bundler

[tom2strobl]

I'm experiencing the same with webpack 5.98.0 and urql 4.2.2 (although as warning and not an error), not directly saying that urql is necessarily at fault, but in our fairly large monorepo urql is the only dependency printing this warning.