Skip to content
This repository has been archived by the owner on Jun 3, 2018. It is now read-only.

script lang="ts" not works #4

Closed
JounQin opened this issue Dec 17, 2017 · 4 comments
Closed

script lang="ts" not works #4

JounQin opened this issue Dec 17, 2017 · 4 comments

Comments

@JounQin
Copy link

JounQin commented Dec 17, 2017

<template lang="pug">
  #app Hello World
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

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

Error:

🚨  /local/GitHub/parcel-study/src/views/App.vue:6:0: 'import' and 'export' may only appear at the top level (6:0)
  4 | <script lang="ts">
  5 | import { Component, Vue } from 'vue-property-decorator'
> 6 |
    | ^
  7 | @Component
  8 | export default class App extends Vue {}
  9 | </script>
@BoltDoggy
Copy link
Owner

BoltDoggy commented Dec 17, 2017

The plugin for vue is using built-in compiler compiles the other lang.

Those compilers are:

coffee,babel
less,sass,scss,stylus
jade,pug

That will allow you to use other parcel plugins to process a part of a Vue component at next version.

But now, you need do it yourself, I'm sorry for this.

I published the 'parcel-plugin-vue@1.3.0', use it, and then,

you can make a file named 'vue.config.js', edit and save it

var TypeScriptAsset = require('parcel-bundler/src/assets/TypeScriptAsset.js');

module.exports = {
    customCompilers: {
        ts: function (content, cb, compiler, filePath) {
            let ts = new TypeScriptAsset(filePath, {}, {});
            ts.contents = content;
            ts.process().then((res) => {
                cb(null, res.js);
            });
        }
    }
};

Good luck for you. @JounQin

For 'vue.config.js', you can refer to https://www.npmjs.com/package/vueify#configuring-options

@JounQin
Copy link
Author

JounQin commented Dec 17, 2017

@lc60005457 Thx for your quick response, but it only works at first rendering on development, and when I refresh the page, it will throw error:

9cc9d023d16b245f57b70f84938815bc.js:9438 Error: Failed to resolve async component default: [object Event]

Reproduce: https://github.com/JounQin/parcel-study/tree/issue/parcel-plugin-vue

@BoltDoggy
Copy link
Owner

@JounQin This Error is a Network Error.

When I try to refresh the page, the server shut down, It's not the plugin fail.

The 'parcel-bundler dependencies' has a 'ws' is '^3.3.2'.

When I clear cache and npm install my demo, ws@3.3.3 is installed, and show this Error.

I try to reinstall ws@3.3.2, It's.

@JounQin
Copy link
Author

JounQin commented Dec 17, 2017

@lc60005457 Thx, lock ws@3.3.2 works to me.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants