Having issues running a custom typescript script with create-react-app

Viewed 362

I have a TypeScript react app that I set up with create-react-app.

> create-react-app --version                         
4.0.3

Command used to create the app:

npx create-react-app comp-builder --template typescript

My app requires some static information to be downloaded in order for it to work. Thus I have created a custom script in my package.json to initialize the data:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch-output": "react-scripts start",
    "dev:download-item-combinations": "ts-node scripts/download-item-combinations.ts"
  },

When I attempt to run my script I am met with an error telling me to set "type": "module" in my package.json:

> npm run dev:download-item-combinations

> comp-builder@0.1.0 dev:download-item-combinations
> ts-node scripts/download-item-combinations.ts

(node:89848) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/me/projects/my-project/services/comp-builder/scripts/download-item-combinations.ts:37
import axios from 'axios';
^^^^^^

As per the advice in the error I have set "type": "module" in my package.json. However now I get an error telling me .ts is an unrecognised extension:

> npm run dev:download-item-combinations

> comp-builder@0.1.0 dev:download-item-combinations
> ts-node scripts/download-item-combinations.ts

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/me/projects/my-project/services/comp-builder/scripts/download-item-combinations.ts

What can I do to make this (very simple) typescript script runnable?


tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "scripts", ".eslintrc.js"]
}
0 Answers
Related