How to use custom plugin in ES module project

[AndreasHald]

Describe the bug
Hi, we recently updated our project to use ES modules by adding "type": "module", in our package.json file.

We use a custom plugin to generate utility functions for our project, this custom plugin is simply a js file we include in our codegen.yml like so:

schema: ...
generates:
   ./src/generated/graphql.ts
      schema: ...
      plugins:
         - ./our-custom-plugin.js

In order to comply with ES6 I converted our plugin file from

module.exports = {
   plugin: (...) => {
   }
}

To

export default {
   plugin: (...) => {
   }
}

However when running the codegen we get the following error

Unable to load template plugin matching './our-custom-plugin.js'.
                  Reason: 
                    Must use import to load ES Module: /Users/.../our-custom-plugin.js

The error appears to occur here const pluginLoader = config.pluginLoader || makeDefaultLoader(context.cwd);

I'm guessing that the makeDefaultLoader is using require? I can see that it appears to be possible to supply your own loader? is there documentation of this somewhere? I haven't been able to find it.

Are there another suggested approach to this?

[dotansimha]

Hi @AndreasHald !
Thank you for creating this. We are currently working on adding ESM support: #6102

cc @PabloSzx

[AndreasHald]

Hi again @dotansimha, I saw that #6102 was closed and released, was that supposed to fix this issue, because even after installing @latest I'm still seeing it.

[PabloSzx]

This issue is due to prevent breaking changes and to be able to do require relative to a specific path, in the ESM support PR the require with "createRequire" was kept for the imports for the cli in config, but it is currently possible to do programmatic usage of graphql-codegen and importing using full ESM all the way

oh, and btw, if you have "type": "module" and you have CJS files, simply use the ".cjs" extension and everything will work just fine

- ./our-custom-plugin.cjs

[alexbjorlig]

This issue is due to prevent breaking changes and to be able to do require relative to a specific path, in the ESM support PR the require with "createRequire" was kept for the imports for the cli in config, but it is currently possible to do programmatic usage of graphql-codegen and importing using full ESM all the way

oh, and btw, if you have "type": "module" and you have CJS files, simply use the ".cjs" extension and everything will work just fine

- ./our-custom-plugin.cjs

This is fucking awesome 🚀
I have been SO tired of removing "type": "module" generate code, then remember to add "type": "module", before everything explodes in CI. Thanks man!