I am brand new to Typescript and Vue.js, and I haven't been able to find a solution here.
The code below is causing a parsing error: '}' expected
I have double-checked all the bracket pairs and as far as my eye can see, everything looks correct.
Here is the base code. I forked it from a fully functional base example. https://github.com/hanachan1026/vue-firebase-startup-kit
// Hello.vue
<template>
<section class="section">
<div class="container">
<h1 class="title">
Hello
{{userName}}
</h1>
<p>Firebase rocks!</p>
<img id="img1" src="" alt="img1" />
</div>
</section>
</template>
<script lang="ts">
import { storage } from "../scripts/firebase";
import Vue from "vue";
import { Component } from "vue-property-decorator";
@Component
export default class Home extends Vue {
created() {
const storageRef = storage.ref();
const imagesRef = storageRef.child('images');
const fileName = 'IMG_1009.JPG';
const imgRef = imagesRef.child(fileName);
imgRef.getDownloadURL().then(function (url) {
const img: HTMLImageElement = <HTMLImageElement>document.getElementById('img1');
img.src = url;
}).catch(function(error) {
console.log(error); // <= parse error here. why?
});
}
get userName(): string {
if (this.$store.state.user) {
return this.$store.state.user.displayName;
}
return "";
}
}
</script>
I understand that this might not be an easy question to answer since there could be numerous reasons. If anyone has had similar experiences, I would appreciate any comments. Thank you.
*add
➤ npm run serve
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66101303390d0f12265648574856">[email protected]</a> serve /Users/me/show-cam-img-demo
> vue-cli-service serve
INFO Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin
ERROR Failed to compile with 1 errors 3:34:02 PM
error in ./src/views/Hello.vue
Module Error (from ./node_modules/eslint-loader/index.js):
/Users/me/show-cam-img-demo/src/views/Hello.vue
35:24 error Parsing error: '}' expected
✖ 1 problem (1 error, 0 warnings)
@ ./src/router/index.ts 4:0-37 9:13-17
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://192.168.1.37:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
No type errors found
Version: typescript 3.8.3
Time: 20252ms