dotansimha / dotansimha/graphql-code-generator

Custom schema loader Typescript error "Cannot use import statement outside a module"

Open
#9,586 0 comments 5 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.3k
Forks
1.4k
Avg merge
1d 1h
Merged PRs (30d)
23

Description

### Which packages are impacted by your issue?

_No response_

### Describe the bug

I'm trying to generate react hooks for the next.js application with codegen custom schema loader.
It looks like the codegen get an error `Cannot use import statement outside a module` while trying to get default export from ts file.

customLoader.ts:

```
import { makeSchema } from "nexus";
import * as casesTypes from "./cases";

const schema = (schemaString: string, config: any) => {
return makeSchema({
types: [casesTypes],
});
};

export default schema;
```

tsconfig.json:

```
{
"compilerOptions": {
"target": "ES5",
"module": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"],
"@api": ["./src/app/api"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
```

running script:

```
"generate": "graphql-codegen-esm --config codegen.json"
```

I hope that it's not a bug and I just did something wrong, but I've tried to follow the guidelines.

### Your Example Website or App

https://the-guild.dev/graphql/codegen/docs/config-reference/schema-field#custom-schema-loader

### Steps to Reproduce the Bug or Issue

1. create simple next js app
2. add nexus and prisma
3. use provided configuration files
4. run `yarn generate`

### Expected behavior

As a user, I expected custom loader is running, but it's have `SyntaxError: Cannot use import statement outside a module` error

### Screenshots or Videos

_No response_

### Platform

- OS: macOS
- NodeJS: v18.13.0
- "next": "13.4.12"
- "prisma": "^5.0.0"
- "nexus": "^1.3.0"
- "@graphql-codegen/cli": "5.0.0"
- "typescript": "4.9.5"

### Codegen Config File

{
"emitLegacyCommonJSImports": false,

"schema": {
"localnexusapi": {
"loader": "./src/graphql/customLoader.ts"
}
},
"documents": "./src/graphql/**/*.graphql",
"overwrite": true,
"generates": {
"./src/api/index.tsx": {
"plugins": [
"typescript",
"typescript-operations",
"typescript-react-apollo"
],
"config": {
"maybeValue": "T | undefined",
"withHooks": true
}
}
}
}

### Additional context

I've already tried guides:

https://the-guild.dev/graphql/codegen/docs/getting-started/esm-typescript-usage (change tsconfig and package.json type prop)

and

https://the-guild.dev/graphql/codegen/docs/config-reference/schema-field#custom-schema-loader (to return function by default to return generated schema object from nexus)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.