hello-world-esm example fails to start

[bigman73]

Issue workflow progress

Progress of the issue based on the
Contributor Workflow

• 1. The issue provides a reproduction available on
  Github

• 2. A failing test has been provided

• 3. A local solution has been provided

• 4. A pull request is pending review

---

Describe the bug

The hello-world-esm example doesn't start.

To Reproduce Steps to reproduce the behavior:

1. Copy the hello-world-esm example folder under a clean folder in local desktop
2. Run npm install in terminal, opened on the ./hello-world-esm folder
3. Run npm run prestart in terminal -> schema generated successfully
4. Run 'npm start` in terminal -> error:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /<FOLDER>/hello-world-esm/index.ts

Expected behavior

The example should start without any issues

Environment:

• OS: MacOS Ventura 13.1
• @graphql-mesh/...: (as defined in the example)
  "@graphql-mesh/cli": "0.82.24",
  "@graphql-mesh/json-schema": "0.37.16",
  "@graphql-mesh/plugin-mock": "0.1.14",
  "graphql": "16.6.0"
• NodeJS: v18.13.0

Additional context

Modifying the tsconfig.json file to add ESM support to ts-node solves the error but exposes another issue

modified tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "rootDir": "./",
    "esModuleInterop": true
  },
  /***/
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node"
  }
  /***/
}

Now running npm start reports another error:

TSError: ⨯ Unable to compile TypeScript:
index.ts:1:28 - error TS2307: Cannot find module './.mesh/index.mjs' or its corresponding type declarations.

1 import { getMeshSDK } from "./.mesh/index.mjs";

The .mesh folder doesn't have index.mjs, but index.js

changing the example index.ts to import the js instead of mjs cause this error:

> [email protected] start
> ts-node index.ts

ReferenceError: exports is not defined in ES module scope

I then changed the tsconfig.json file to have ESM module (instead of common), as well as the target:

{
  "compilerOptions": {
    /***/
    "module": "ES2022",
    "target": "ES2022",
    /***/
    "rootDir": "./",
    "esModuleInterop": true
  },
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node"
  }
}

The mesh builds now outputs ESM instead of CJS

💡 🕸️  Mesh Cleaning existing artifacts
💡 🕸️  Mesh Reading the configuration
💡 🕸️  Mesh Generating the unified schema
💡 🕸️  Mesh - Hello World Generating GraphQL schema from JSON Schemas
💡 🕸️  Mesh - Hello World Processing annotations for the execution layer
💡 🕸️  Mesh Generating artifacts
💡 🕸️  Mesh Generating index file in TypeScript
💡 🕸️  Mesh Writing index.ts for ESM to the disk.
💡 🕸️  Mesh Compiling TS file as ES Module to "index.js"
💡 🕸️  Mesh Deleting index.ts
💡 🕸️  Mesh Cleanup
💡 🕸️  Mesh Done! => /<FOLDER>/hello-world-esm/.mesh

The example program runs and outputs:

> [email protected] start
> ts-node index.ts

💡 🕸️  Mesh - Hello World Processing annotations for the execution layer
[Object: null prototype] { greeting: 'Hello World' }

The graphql mesh source code - https://github.com/Urigo/graphql-mesh/blob/8429bf23457aea19969dab246fc4f0517644bf12/packages/cli/src/commands/ts-artifacts.ts#L502 - creates an esmjob('.js') for "type": "module" (i.e. ism) of package.json.
therefore the mjs will never be generated and the reference to it in index.ts will always fail.

I can create a PR to fix this, but would like to first know if the owners agree with this issue.