Creating a Meteor + Vue + Typescript project that uses Class Style Components

[michael2109]

I would like to create a Meteor project that uses Vue and Typescript with Class Style Components like mentioned here. I can get it working correctly using Vue.extend but not Class Style Components.

Here is my original stackoverflow question.

Creating a Meteor project that uses Vue and Typescript

Also I got help with getting it to work using Vue.extends here.

Vue + Typescript "meteor:" type definition

Sorry, I don’t really have experience yet of vue-class-component. All I know is that my combination of packages is working well on a couple of projects with Meteor 1.9: // /package.js "dependencies": { "@babel/runtime": "^7.12.5", "babel-runtime": "^6.26.0", "vue": "^2.6.12", "vue-meteor-tracker": "^2.0.0-beta.5", "vue-router": "^3.1.6", "vue-server-renderer": "^2.6.12", ... "devDependencies": { "@babel/plugin-transform-typescript": "^7.12.1", "@types/me…

Here are my steps for creating the project.

CMD

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

Update Hello.vue

<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>

Add these devDependencies if they are missing

"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"
}

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)

What is the correct method of setting up a Meteor, Vue, Typescript and Class Style Components project?

[diavrank95]

Hi @michael2109 , could you resolve it? recently I have had the same problem.