Src imports raises errors

roryprimrose commented 7 years ago

Is there a way to support Src imports?

For example, I have index.html

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="app">
        </div>
    </body>
</html>

This is served with index.ts

import * as Vue from "vue";

import Router from "./components/router/router";
import App from "./components/app/app.vue";

class Application {

    constructor() {

        const router = new Router().compile();

        new Vue({
            router: router,
            components: {
                App
            },
            render: h => h("App")
        }).$mount("#app");
    }
};

export default new Application();

I have broken up app.vue into src files:

<template src="./app.html"></template>
<script src="./app.ts"></script>

Webpack contains the following log:

ERROR in ./client/src/index.ts
(4,17): error TS2307: Cannot find module './components/app/app.vue'.

If I only use the template in the external file then everything is good. Is this supported? Are there any workarounds?

Cheers

digitalheir commented 7 years ago

I think this is the same issue as https://github.com/HerringtonDarkholme/vue-ts-loader/issues/1?

Use

<script>
import component from './file.ts';
export default component;
</script>

or use another loader like awesome-ts-loader.

roryprimrose commented 7 years ago

Thanks @digitalheir, I used that import export workaround and the appendTsSuffixTo: [/\.vue$/] config. This now works with external ts files.

One thing I noticed was that this is all or nothing. You can't have vue files that do not have external ts files anymore. Not really a problem as that was the intention, but could trip people up.

HerringtonDarkholme / vue-ts-loader

Src imports raises errors #3