While running a demo using vue + TypeScript with Parcel, I encountered an error in the browser after successfully bootstrapping:
vue.runtime.esm.js:7878 Uncaught TypeError: Cannot read property 'split' of undefined
at Object.exports.install (vue.runtime.esm.js:7878)
at Home.vue:17
at Object.parcelRequire.11.vue-hot-reload-api (Home.vue:17)
at newRequire (main.54d39494.js:48)
at localRequire (main.54d39494.js:54)
at Object.parcelRequire.2.vue (Home.vue:17)
at newRequire (main.54d39494.js:48)
at parcelRequire.11 (main.54d39494.js:80)
at main.54d39494.js:106
The error is happening in index.js
exports.install = function (vue, browserify) {
if (installed) { return }
installed = true
Vue = vue.__esModule ? vue.default : vue
version = Vue.version.split('.').map(Number) // Vue.version is undefined
Below are my demo files:
Home.vue
<template>
<div class="home">
<img src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '../components/HelloWorld.vue'
@Component({
components: {
HelloWorld,
},
})
export default class Home extends Vue {}
</script>
Could someone please point out what's wrong with the export default statement?
Is there any issue with the typescript configuration?
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"jsx": "preserve",
"module": "esnext",
"moduleResolution": "node",
"noImplicitReturns": true,
"sourceMap": true,
"strict": true,
"target": "esnext",
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "esnext.array", "dom", "dom.iterable", "scripthost"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
"exclude": ["node_modules"]
}