How to compile TypeScript files to JavaScript using Vue.js

Question

I'm trying to compile TypeScript files into JavaScript files using tsconfig.json file. The tsconfig.json files is:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "allowJs": true,
    "outDir": "./build",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.test.ts"
  ]
}

The above configs work fine and create compiled JavaScript files in the build folder. If I use node run index.js inside the build folder, it also works fine. But if I import the index.js file from the build folder into vue component, it does not work and throws the following error:

Uncaught ReferenceError: exports is not defined

I tried to fix by adding:

"allowSyntheticDefaultImports": true

but no luck. I also tried the recommended config from official docs:

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "./test-app/src/assets/js"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.test.ts"
  ]
}

it throws the following error:

TypeError: fs.existsSync is not a function

I'm already requiring fs in ts file.

The goal is to use compiled JavaScript files into Vue.js app. can anybody help me out what I'm missing in tsconfig.json file? or is there anyother way to compile ts into js using vue.js ? many thanks.

Answer 1

Short answer: Change the target and module to "esnext"

{
  "compilerOptions": {
    "target": "esnext",
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "./test-app/src/assets/js"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.test.ts"
  ]
}

However, I would not recommend importing built files in your.vue component, as you need to constantly build them for them to be updated. Here is a page from the vue.js doc on how to integrate typescript: https://v2.vuejs.org/v2/guide/typescript.html