Webpack error when using graph-client in app bootstrapped w/ Create React App

[webthethird]

My team is trying to use @live queries in our front-end, which uses Urql, as we transition to the Graph Network from our self-hosted subgraph, which supports subscriptions.

We have tried to follow the urql-live-query example, which uses Vite. But we bootstrapped our app with create-react-app which uses webpack under the hood, and we've been running into the following compilation error when attempting to use the graph-client with our existing setup:

Module build failed: UnhandledSchemeError: Reading from "node:url" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
    at /home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/NormalModule.js:918:25
    at Hook.eval [as callAsync] (eval at create (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/tapable/lib/Hook.js:18:14)
    at Object.processResource (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/NormalModule.js:915:8)
    at processResource (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/NormalModule.js:905:3)
    at NormalModule.build (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/NormalModule.js:1081:15)
    at /home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/Compilation.js:1400:12
    at NormalModule.needBuild (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/NormalModule.js:1410:26)
    at Compilation._buildModule (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/Compilation.js:1381:10)
    at /home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/util/AsyncQueue.js:305:10
    at Hook.eval [as callAsync] (eval at create (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._startProcessing (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/util/AsyncQueue.js:295:26)
    at AsyncQueue._ensureProcessing (/home/webthethird/Ethereum/Increment/create-react-app-urql-live-query/node_modules/webpack/lib/util/AsyncQueue.js:282:12)
    at process.processImmediate (node:internal/timers:478:21)

I have created a minimal reproducible example and would greatly appreciate your help with making this work.

[webthethird]

@ardatan Any idea how to solve this issue, or who else to tag who might know?

[just2102]

Same stuff in latest Next.js using App router.

 ⨯ node:url
Module build failed: UnhandledSchemeError: Reading from "node:url" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
Import trace for requested module:
node:url
./node_modules/fast-uri/index.js
./node_modules/@envelop/graphql-jit/node_modules/fast-json-stringify/lib/validator.js
./node_modules/@envelop/graphql-jit/node_modules/fast-json-stringify/index.js
./node_modules/@envelop/graphql-jit/node_modules/graphql-jit/dist/esm/execution.js
./node_modules/@envelop/graphql-jit/node_modules/graphql-jit/dist/esm/index.js
./node_modules/@envelop/graphql-jit/esm/index.js
./node_modules/@graphql-mesh/runtime/esm/get-mesh.js
./node_modules/@graphql-mesh/runtime/esm/index.js
./src/data/graphql/.graphclient/index.ts
./src/app/info/page.tsx

[just2102]

I've prepared a reproduction repo: https://github.com/just2102/graphclient-nextjs-webpack

You can run it and go to localhost:3000/info, that will start the query and throw the abovementioned webpack error. Don't forget to add your The Graph api key to .env.local file in the root directory. NEXT_PUBLIC_THE_GRAPH_API_KEY

[joyboy-sats]

Maybe you can try modifying next.config.mjs.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        url: false,
        path: false,
      };

      config.plugins.push(new webpack.NormalModuleReplacementPlugin(
        /node:url/,
        function(resource) {
          resource.request = resource.request.replace(/^node:/, '');
        }
      ));
    }

    return config;
  },
};

export default nextConfig;

[just2102]

Maybe you can try modifying next.config.mjs.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  images: {
    loader: "custom",
    loaderFile: "./imgLoader.js",
    domains: ["bump-test.s3.ap-southeast-1.amazonaws.com"],
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        url: false,
        path: false,
      };

      config.plugins.push(new webpack.NormalModuleReplacementPlugin(
        /node:url/,
        function(resource) {
          resource.request = resource.request.replace(/^node:/, '');
        }
      ));
    }

    return config;
  },
};

export default nextConfig;

 throw new Error(`Specified images.loaderFile does not exist at "${absolutePath}".`);

[just2102]

I've removed the images configuration and it kinda worked lol. Some warnings were thrown on the first request but it still works.

[just2102]

And installing long and uglify-es packages gives the following error:

Full log:

 ⨯ ./node_modules/uglify-es/tools/node.js:1:1
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/graphql-jit/node_modules/fast-json-stringify/index.js
./node_modules/graphql-jit/dist/execution.js
./node_modules/graphql-jit/dist/index.js
./node_modules/@graphql-mesh/runtime/esm/useSubschema.js
./node_modules/@graphql-mesh/runtime/esm/index.js
./src/data/graphql/.graphclient/index.ts
./src/app/info/page.tsx
 ⨯ ./node_modules/uglify-es/tools/node.js:1:1
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/graphql-jit/node_modules/fast-json-stringify/index.js
./node_modules/graphql-jit/dist/execution.js
./node_modules/graphql-jit/dist/index.js
./node_modules/@graphql-mesh/runtime/esm/useSubschema.js
./node_modules/@graphql-mesh/runtime/esm/index.js
./src/data/graphql/.graphclient/index.ts
./src/app/info/page.tsx
 GET /info 500 in 22394ms
 ⚠ ./node_modules/@graphql-mesh/utils/esm/defaultImportFn.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/@graphql-mesh/utils/esm/defaultImportFn.js
./node_modules/@graphql-mesh/utils/esm/index.js
./src/data/graphql/.graphclient/index.ts
./src/app/info/page.tsx

./node_modules/uglify-es/tools/node.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/uglify-es/tools/node.js
./node_modules/graphql-jit/node_modules/fast-json-stringify/index.js
./node_modules/graphql-jit/dist/execution.js
./node_modules/graphql-jit/dist/index.js
./node_modules/@graphql-mesh/runtime/esm/useSubschema.js
./node_modules/@graphql-mesh/runtime/esm/index.js
./src/data/graphql/.graphclient/index.ts
./src/app/info/page.tsx

[just2102]

Also the autopagination doesn't work:

Error: Unable to load transform matching autopagination while resolving C:\EC\prog\graphql\uni-graph\src\data\graphql\autopagination: Error: Cannot find module 'C:\EC\prog\graphql\uni-graph\src\data\graphql\autopagination.ts'
Require stack:
- C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\utils\cjs\defaultImportFn.js
- C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\utils\cjs\index.js
- C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\runtime\cjs\get-mesh.js
- C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\runtime\cjs\index.js
- C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\cli\cjs\index.js
- C:\EC\prog\graphql\uni-graph\node_modules\@graphprotocol\client-cli\cjs\index.js
- C:\EC\prog\graphql\uni-graph\node_modules\@graphprotocol\client-cli\cjs\bin.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue (C:\EC\prog\graphql\uni-graph\node_modules\@cspotcode\source-map-support\source-map-support.js:811:30)
    at Function.Module._resolveFilename (C:\EC\prog\graphql\uni-graph\node_modules\tsconfig-paths\src\register.ts:115:36)
    at Function.Module._load (node:internal/modules/cjs/loader:986:27)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\utils\cjs\defaultImportFn.js:29:74
    at async defaultImportFn (C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\utils\cjs\defaultImportFn.js:29:18)
    at getPackage (C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\config\cjs\utils.js:50:23)
    at async C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\config\cjs\process.js:129:69
    at async Promise.all (index 0)
    at async Promise.all (index 1)
    at async C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\config\cjs\process.js:93:43
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async processConfig (C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\config\cjs\process.js:86:114)
    at async Object.handler (C:\EC\prog\graphql\uni-graph\node_modules\@graphql-mesh\cli\cjs\index.js:331:32)