3

I'm having a lot of trouble trying to get Typescript working in a Meteor project with Vue.

I've created a project from scratch using these commands.

Commands

meteor create --vue gift-list-app
meteor add typescript
meteor npm install --save-dev @types/meteor
meteor add nathantreid:vue-typescript-babel
meteor npm install --save-dev @babel/plugin-transform-typescript

I next go into Hello.vue and specify the lang in the <script> tag.

<template>
  <div>
    <button @click="increment">Click Me</button>
    <p>You've pressed the button {{counter}} times.</p>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      counter: 0,
    }
  },
  methods: {
    increment() {
      this.counter += 1
    }
  },
}
</script>

<style scoped>
  p {
    font-family: serif;
  }
</style>

Error

[vue-component] Error while compiling in tag <script> col:1: C:\Users\Michael\Desktop\test-app\gift-list-app\node_modules\@vue\cli-plugin-typescript\generator\template\src\components\HelloWorld.vue: Unexpected token (1:1)

> 1 | [^]*?<\/script>/
    |  ^
  2 | ---
  3 | <script lang="ts">
  4 | <%_ if (!options.classComponent) { _%>
[vue-component] Error while compiling in tag <script> col:1: C:\Users\Michael\Desktop\test-app\gift-list-app\node_modules\@vue\cli-plugin-typescript\generator\template\src\components\HelloWorld.vue: Unexpected token (1:1)

> 1 | [^]*?<\/script>/
    |  ^
  2 | ---
  3 | <script lang="ts">
  4 | <%_ if (!options.classComponent) { _%>
=> Errors prevented startup:
   
   While processing files with akryum:vue-component (for target
   web.browser):
   packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not
   defined
   at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
   at VueComponentTagHandler.getResults
   (packages/vue-component/plugin/tag-handler.js:156:11)
   at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
   at compileOneFileWithContents
   (packages/vue-component/plugin/vue-compiler.js:541:12)
   at VueCompo.compileOneFile
   (packages/vue-component/plugin/vue-compiler.js:140:12)
   at packages/vue-component/plugin/vue-compiler.js:57:34
   at
   C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
   at replenish
   (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
   at
   C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
   at Object.eachLimit$1
   (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
   at VueCompo.processFilesForTarget
   (packages/vue-component/plugin/vue-compiler.js:41:11)
   
   
   While processing files with akryum:vue-component (for target
   os.windows.x86_64):
   packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not
   defined
   at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
   at VueComponentTagHandler.getResults
   (packages/vue-component/plugin/tag-handler.js:156:11)
   at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
   at compileOneFileWithContents
   (packages/vue-component/plugin/vue-compiler.js:541:12)
   at VueCompo.compileOneFile
   (packages/vue-component/plugin/vue-compiler.js:140:12)
   at packages/vue-component/plugin/vue-compiler.js:57:34
   at
   C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
   at replenish
   (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
   at
   C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
   at Object.eachLimit$1
   (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
   at VueCompo.processFilesForTarget
   (packages/vue-component/plugin/vue-compiler.js:41:11)

What is the correct method of creating a Meteor/Vue project that uses Typescript?

Update

I've tried adding the libraries mentioned in the answer below however I still get problems when using the @Component tag as shown in multiple tutorials. I've added the vue-property-decorator library.

Code

<template>
  <div>
    <button>Click Me</button>
    <p>You've pressed the button times.</p>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'

@Component
export default class Hello extends Vue {
}
</script>

<style scoped>
p {
  font-family: serif;
}
</style>

Error

[vue-component] Error while compiling in tag <script> using lang ts Cannot read property 'data' of null
TypeError: Cannot read property 'data' of null
at typescriptHandler (packages/vue-component-typescript-babel/vue-typescript.js:22:22)
at packages/meteor.js:306:21
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:91:26)
at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
at hotCompile (packages/vue-component/plugin/vue-compiler.js:347:23)
at runWithEnvironment (packages/meteor.js:1286:24)
Exception in callback of async function: ReferenceError: TemplatingTools is not defined
at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
at hotCompile (packages/vue-component/plugin/vue-compiler.js:347:23)
at runWithEnvironment (packages/meteor.js:1286:24)
[vue-component] Error while compiling in tag <script> using lang ts Cannot read property 'data' of null
TypeError: Cannot read property 'data' of null
at typescriptHandler (packages/vue-component-typescript-babel/vue-typescript.js:22:22)
at packages/meteor.js:306:21
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:91:26)
at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
at packages/vue-component/plugin/vue-compiler.js:57:34
at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
at __bottom_mark__ (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\utils\tools\utils\parse-stack.ts:92:14)
at C:\tools\isobuild\compiler-plugin.js:212:27
at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
at C:\tools\isobuild\compiler-plugin.js:199:22
at Function.time (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:284:12)
at C:\tools\isobuild\compiler-plugin.js:198:15
at Function._.each._.forEach (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore.js:191:9)
at CompilerPluginProcessor.runCompilerPlugins (C:\tools\isobuild\compiler-plugin.js:188:7)
at ClientTarget._runCompilerPlugins (C:\tools\isobuild\bundler.js:1149:22)
at C:\tools\isobuild\bundler.js:858:34
at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
at ClientTarget.make (C:\tools\isobuild\bundler.js:852:18)
at C:\tools\isobuild\bundler.js:3233:14
at C:\tools\isobuild\bundler.js:3386:25
at Array.forEach (<anonymous>)
  at C:\tools\isobuild\bundler.js:3340:14
  at Object.capture (C:\tools\utils\buildmessage.js:283:5)
  at bundle (C:\tools\isobuild\bundler.js:3214:31)
  at C:\tools\isobuild\bundler.js:3157:32
  at Slot.withValue (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.js:73:29)
  at Object.withCache (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1663:39)
  at Object.bundle (C:\tools\isobuild\bundler.js:3157:16)
  at C:\tools\runners\run-app.js:581:24
  at Function.run (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
  at bundleApp (C:\tools\runners\run-app.js:580:34)
  at AppRunner._runOnce (C:\tools\runners\run-app.js:627:35)
  at AppRunner._fiber (C:\tools\runners\run-app.js:948:28)
  at C:\tools\runners\run-app.js:410:12
  [vue-component] Error while compiling in tag <script> using lang ts Cannot read property 'data' of null
    TypeError: Cannot read property 'data' of null
    at typescriptHandler (packages/vue-component-typescript-babel/vue-typescript.js:22:22)
    at packages/meteor.js:306:21
    at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:91:26)
    at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
    at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
    at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
    at packages/vue-component/plugin/vue-compiler.js:57:34
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
    at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
    at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
    at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
    at __bottom_mark__ (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\utils\tools\utils\parse-stack.ts:92:14)
    at C:\tools\isobuild\compiler-plugin.js:212:27
    at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
    at C:\tools\isobuild\compiler-plugin.js:199:22
    at Function.time (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:284:12)
    at C:\tools\isobuild\compiler-plugin.js:198:15
    at Function._.each._.forEach (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore.js:191:9)
    at CompilerPluginProcessor.runCompilerPlugins (C:\tools\isobuild\compiler-plugin.js:188:7)
    at ServerTarget._runCompilerPlugins (C:\tools\isobuild\bundler.js:1149:22)
    at C:\tools\isobuild\bundler.js:858:34
    at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
    at ServerTarget.make (C:\tools\isobuild\bundler.js:852:18)
    at C:\tools\isobuild\bundler.js:3258:14
    at C:\tools\isobuild\bundler.js:3392:24
    at Object.capture (C:\tools\utils\buildmessage.js:283:5)
    at bundle (C:\tools\isobuild\bundler.js:3214:31)
    at C:\tools\isobuild\bundler.js:3157:32
    at Slot.withValue (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.js:73:29)
    at Object.withCache (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1663:39)
    at Object.bundle (C:\tools\isobuild\bundler.js:3157:16)
    at C:\tools\runners\run-app.js:581:24
    at Function.run (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
    at bundleApp (C:\tools\runners\run-app.js:580:34)
    at AppRunner._runOnce (C:\tools\runners\run-app.js:627:35)
    at AppRunner._fiber (C:\tools\runners\run-app.js:948:28)
    at C:\tools\runners\run-app.js:410:12
    => Errors prevented startup:

    While processing files with akryum:vue-component (for target web.browser):
    packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
    at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
    at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
    at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
    at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
    at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
    at packages/vue-component/plugin/vue-compiler.js:57:34
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
    at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
    at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
    at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)


    While processing files with akryum:vue-component (for target os.windows.x86_64):
    packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
    at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
    at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
    at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
    at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
    at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
    at packages/vue-component/plugin/vue-compiler.js:57:34
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
    at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
    at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
    at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)

If I've understood correctly these formats for the components should be possible when using Typescript?

Improve this question

1 Answer 1

Reset to default
0

Thanks for the detailed commands and setup directions.

Indeed I ran into the same problem, so I tried cloning nathantreid:vue-typescript into packages directory and restarted the application. It installed these packages then continued to work flawlessly!

    "devDependencies": {
    "@babel/plugin-transform-typescript": "^7.12.1",
    "@types/meteor": "^1.4.67",
    "@babel/core": "^7.4.4",
    "@babel/plugin-syntax-decorators": "^7.2.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/preset-typescript": "^7.3.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0"
  }

So, I recommend that you first try installing these dev dependencies first and it doesn't work then try cloning the package as I did. Good Luck!

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This has fixed it for if I use the code for Home.vue shown above but it still doesn't seem to allow the @Component tag to be used as shown in the tutorials I've seen. I've updated the question. Am I doing this wrong?
I see. Since this the case. Let me share my findings so far: vue-class-component requires extra build steps configuration class-component.vuejs.org/guide/installation.html#manual-setup Which you can mimic them in Meteor as describe here: github.com/meteor/meteor/tree/devel/packages/… So, I installed the plugins as described and configured .babelrc but this has led me to more errors and I thought I'm straying off the path. You may try following in my foot steps and see where it leads you.
I mentioned the question in the community Slack meteor-community.slack.com/archives/CS46CNDN0/p1616249493000400 and forums.meteor.com/t/vue-typescript-meteor-type-definition/54506

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.