vue export default fail in typescript via parcel

Question

I use vue + TypeScript via Parcel to run a demo, and throw the error in browser after bootstap succeed:

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

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

What's the wrong with export default ?

The typescript configuration is there anything wrong?

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

junlin · Accepted Answer · 2018-07-10 02:37:15Z

1

Clean the dist and .cache directory in root every time start.

package.json

  "scripts": {
    "clean": "rm -rf .cache && rm -rf dist",
    "prestart": "yarn clean",
    "start": "parcel public/index.html",
    "build": "parcel build public/index.html"
  },

answered Jul 10, 2018 at 2:37

junlin

2,0552 gold badges29 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

vue export default fail in typescript via parcel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related