How do I run the codegen in browser?

[vicary]

I am trying to create simple code editor which generates schema on-the-fly, similar to your website at https://the-guild.dev/graphql/codegen.

Importing @graphql-codegen/typescript throws the following error

TypeError: process.hrtime is not a function

An extracted require stack below

../../node_modules/@ardatan/relay-compiler/lib/core/GraphQLCompilerProfiler.js (192:20)
../../node_modules/@ardatan/relay-compiler/lib/core/CompilerContext.js (13:15)
../../node_modules/@graphql-tools/relay-operation-optimizer/esm/index.js (11:109)
../../node_modules/@graphql-codegen/visitor-plugin-common/esm/optimize-operations.js (5:98)
../../node_modules/@graphql-codegen/visitor-plugin-common/esm/index.js (74:82)
../../node_modules/@graphql-codegen/typescript/esm/visitor.js (8:96)
../../node_modules/@graphql-codegen/typescript/esm/index.js (8:69)

Should I polyfill the process object in webpack setting of my next.config.js, or is there a way to prevent the profiler from importing?

[saihaj]

Are you using edge runtime? Can you share a minimal reproduction. You can either use StackBlitz, CodeSandbox or a public GitHub repo.

[saihaj]

why are you importing the plugin like that?

[vicary]

I want to create a simple version of online editor that uses your codegen, which runs in the browser.

I see that you are importing @graphql-codegen/core and dynamically importing the typescript plugin via import(), should I try that instead?

[ardatan]

I think you can try the same like here;
https://github.com/dotansimha/graphql-code-generator/blob/master/website/src/components/live-demo/generate.ts

[vicary]

Oh! That's why you defer plugins with import().

if (canUseDOM) {
  process.hrtime = () => [0, 0]; // Fix error - TypeError: process.hrtime is not a function
  window.global = window; // type-graphql error - global is not defined
}

[vicary]

@ardatan Yes it's working now, thanks a lot!