How do I run a node script in a typescript react project?

Question

I have a React project, and it includes talking to an API.

I have a module defined in the project that abstracts away the api access.

So for example it has methods like addFoo and getFoos. I would like to use this module from a script that I would like to run directly on the command line. The purpose of the script is to load a bunch of data into a database via the api.

When I use plain .js, it seems to be fairly easy to just run > node path/to/file. The relative import paths work fine.

Issue

When I use .ts it doesn't work. It complains that it can't find the module.

Question
What's the right way to run a .ts CLI script in a React project directly? Or is this the wrong way to do this?

Thanks !

nodejs doesn't understand ts. you should translate it to js before use it. — dunhuang, Aug 08 '20 at 03:28
Hi, install `ts-node`. It should get you sorted. [See this answer on stackoverflow](https://stackoverflow.com/questions/33535879/how-to-run-typescript-files-from-command-line) — MwamiTovi, Aug 08 '20 at 06:05

score 3 · Accepted Answer · answered Aug 08 '20 at 15:18

3

MwamiTovi's response above was close however I additionally had to set {"module": "commonjs"}.

ts-node -O '{"module":"commonjs"}' src/tools/foo.ts

answered Aug 08 '20 at 15:18

corsair

347
3
13

Dimas Lanjaka · Answer 2 · 2023-08-27T12:29:39.370

add ts-node property to your tsconfig.json. For example below:

{
  "ts-node": { // ts-node automated configuration using commonjs
    "compilerOptions": {
      "module": "CommonJS"
    }
  },
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "strictNullChecks": false,
    "isolatedModules": false,
    "allowUnreachableCode": true,
    "noImplicitAny": false,
    "noEmit": false,
    "outDir": "dist",
    "jsx": "react-jsx"
  },
  "include": ["./src", "./*.json", "./*.ts", "snapshot3.js"],
  "typeAcquisition": { "enable": true },
  "exclude": ["**/node_modules/**", "**/tmp/**", "**/build/**", "**/dist/**"]
}

then run single tsx file:

ts-node to/single/file.tsx

when you need some options to ts-node just modify tsconfig.json property ts-node

OR using direct ts-node ESM experimental without removing {"type": "module"} in package.json

cross-env-shell NODE_ENV=development node --experimental-specifier-resolution=node --loader ts-node/esm -r dotenv/config "src/to/file.ts"

cross-env-shell NODE_ENV=development is optional

Thanks a lot, that completely did the trick for me! Didn't have to set any other options. — cupiqi09, Jun 03 '23 at 23:06
yeah, no need setup anything. just add `ts-node` property and run `ts-node to/single/file.tsx` and done. — Dimas Lanjaka, Jun 05 '23 at 13:37
@Djima: nope, without setting modules to CommonJS it doesn't work since create-react-app sets modules to "esnext" — cupiqi09, Jun 08 '23 at 13:54
this also works `cross-env-shell NODE_ENV=development node --experimental-specifier-resolution=node --loader ts-node/esm -r dotenv/config "src/to/file.ts"` — Dimas Lanjaka, Aug 27 '23 at 12:29

How do I run a node script in a typescript react project?

2 Answers2