Issues with TypeScript

[Toilal]

I have added like stated in docs this type definition:

declare module '*.html' {
  import Vue from 'vue';
  interface WithRender {
    <V extends Vue>(options: Vue.ComponentOptions<V>): Vue.ComponentOptions<V>
    <V extends typeof Vue>(component: V): V
  }
  const withRender: WithRender;
  export = withRender
}

But then, using an import with style definition fails because it doesn't ends with .html

import ViewRender from './home.html?style=./home.scss';

It works properly when using ./home.html only.

My current workaround is to add another wildcard module declaration with *.scss.

Any idea to enhance the library to avoid this workaround ? Note that a single wildcard is allowed in typescript module declaration.

I also have another issue: I need to place @Component before @ViewRender. If I use ordering from the docs (reverse), it fails with this error :

[Vue warn]: invalid template option:function (_exports) {
  var options = _exports
  if (typeof _exports === "function") options = _exports.options

  options.render = render
  options.staticRenderFns = staticRenderFns
  if (module.hot && api) {
    api.createRecord("data-v-1", options)
  }
  return _exports
} 
(found in <App>)
warn @ vue.esm.js:558
./node_modules/vue/dist/vue.esm.js.Vue$3.$mount @ vue.esm.js:9195
init @ vue.esm.js:2892
createComponent @ vue.esm.js:4581
createElm @ vue.esm.js:4524
createChildren @ vue.esm.js:4649
createElm @ vue.esm.js:4557
patch @ vue.esm.js:5017
Vue._update @ vue.esm.js:2019
updateComponent @ vue.esm.js:2139
get @ vue.esm.js:2448
Watcher @ vue.esm.js:2431
mountComponent @ vue.esm.js:2143
./node_modules/vue/dist/vue.esm.js.Vue$3.$mount @ vue.esm.js:7178
./node_modules/vue/dist/vue.esm.js.Vue$3.$mount @ vue.esm.js:9224
Vue._init @ vue.esm.js:3710
Vue$3 @ vue.esm.js:3791
./src/index.ts @ index.ts:7
__webpack_require__ @ bootstrap 378744f…:659
fn @ bootstrap 378744f…:83
0 @ class-component-hooks.ts:8
__webpack_require__ @ bootstrap 378744f…:659
./node_modules/ansi-html/index.js.module.exports @ bootstrap 378744f…:708
(anonymous) @ bootstrap 378744f…:708
vue.esm.js:4657Uncaught TypeError: Cannot read property 'componentInstance' of null
    at isPatchable (vue.esm.js:4657)
    at initComponent (vue.esm.js:4602)
    at createComponent (vue.esm.js:4588)
    at createElm (vue.esm.js:4524)
    at createChildren (vue.esm.js:4649)
    at createElm (vue.esm.js:4557)
    at Vue$3.patch [as __patch__] (vue.esm.js:5017)
    at Vue$3.Vue._update (vue.esm.js:2019)
    at Vue$3.updateComponent (vue.esm.js:2139)
    at Watcher.get (vue.esm.js:2448)

[ktsn]

My current workaround is to add another wildcard module declaration with *.scss.

I think there are no work around other than this and practically it just works.

I need to place @Component before @ViewRender

I'm afraid I could not reproduce this, can you share the reproducible code by github repository?

[Toilal]

I'll create a repo with my template asap, currently it's only a hello world.

[Toilal]

I have created a vue-cli template using this loader and TypeScript, but can't reproduce the issue finally. I must have something wrong before.

FYI, here's the template : https://github.com/Toilal/vue-ts-hmr-std-files

[Toilal]

Here's another template which is a fork of official webpack template, replacing vue-loader with vue-template-loader.

[ktsn]

Nice! I've added links to your templates in README :)