Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Tracked by #708
webthethird opened this issue May 21, 2024 · 8 comments
Open
Tracked by #708

Comments

@webthethird
Copy link

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
Copy link
Author

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

@just2102
Copy link

just2102 commented May 29, 2024

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
Copy link

just2102 commented May 30, 2024

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
Copy link

joyboy-sats commented Jun 3, 2024

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
Copy link

just2102 commented Jun 4, 2024

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
Copy link

just2102 commented Jun 4, 2024

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

@just2102
Copy link

just2102 commented Jun 4, 2024

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

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
Copy link

just2102 commented Jun 4, 2024

Also the autopagination doesn't work:
image

image

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants