Build fails with node@20 about react-cosmos HOT 4 CLOSED

Thanks @ThaisRobba and @predragnikolic for reporting this and providing context!

Fixed it in #1564 and upgraded the CI jobs from Node 16 & 18 to Node 18 & 20.

Didn't supress the ExperimentalWarning because I want us to stay aware that "Custom ESM Loaders is an experimental feature and might change at any time". In the meantime I subscribed to TypeStrong/ts-node#1997 so if a better solution for using ts-node comes along we can switch to that.

from react-cosmos.

I have experienced the same issue.

λ  react-cosmos main ✗ node -v
v20.5.0
λ  react-cosmos main ✗ yarn -v
1.22.11

I tired made the following change in package.json and it started working:

- "build": "ts-node --esm ./scripts/build.ts"
+ "build": "node --loader ts-node/esm ./scripts/build.ts"

Does this work for you?

from react-cosmos.

Not an expert,
but base on the docs https://github.com/TypeStrong/ts-node#commonjs-vs-native-ecmascript-modules
I would say ts-node --esm, ts-node-esm and node --loader ts-node/esm can be used interchangeably, but I am not sure.

But on my setup, only node --loader ts-node/esm will work in the build script.
the other two will throw the ERR_UNKNOWN_FILE_EXTENSION error.

I tried to see what config does the ts-node command use, and here is the output of npx ts-node --showConfig

λ  react-cosmos main ✗ npx ts-node --showConfig
{
  "ts-node": {
    "cwd": "/home/predragnikolic/Documents/sandbox/react-cosmos",
    "projectSearchDir": "/home/predragnikolic/Documents/sandbox/react-cosmos",
    "project": "/home/predragnikolic/Documents/sandbox/react-cosmos/tsconfig.json"
  },
  "compilerOptions": {
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "moduleResolution": "node10",
    "newLine": "lf",
    "noEmit": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "es2022",
    "module": "es2022",
    "sourceMap": true,
    "inlineSourceMap": false,
    "inlineSources": true,
    "declaration": false,
    "outDir": "./.ts-node"
  }
}

notice "moduleResolution": "node10", this line is not the same as the original line in tsconfig.json.

from react-cosmos.

Found the related issue on ts-node TypeStrong/ts-node#1997

from react-cosmos.