Not working properly with newer vue?

[kissge]

Thanks for this great plugin. I've been trying hard for vue-template-loader to work with vue-cli 3, which is RC atm, but still no luck. What I did:

1. Scaffold a project using @vue/cli
2. Install vue-template-loader

The result is https://github.com/kissge/vue-template-loader-test

When I run npm run serve these messages are shown:

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 98% after emitting CopyPlugin                                                         

 ERROR  Failed to compile with 1 errors                                                       08:15:09

  TypeError: html.includes is not a function
  
  - insert-links-into-head.js:23 insertLinksIntoHead
    [vanilla2]/[@vue]/preload-webpack-plugin/src/lib/insert-links-into-head.js:23:12
  
  - index.js:115 PreloadPlugin.addLinks
    [vanilla2]/[@vue]/preload-webpack-plugin/src/index.js:115:27
  
  - index.js:132 compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync
    [vanilla2]/[@vue]/preload-webpack-plugin/src/index.js:132:37
  
  
  - new Promise
  
  
  - Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise]
    [vanilla2]/[tapable]/lib/Hook.js:35:21
  
  - index.js:673 
    [vanilla2]/[html-webpack-plugin]/index.js:673:47
  
  - index.js:178 Promise.resolve.then.then.then.then.then.then.html
    [vanilla2]/[html-webpack-plugin]/index.js:178:18
  
  
  - next_tick.js:188 process._tickCallback
    internal/process/next_tick.js:188:7
  

Type checking in progress...
No type errors found
Version: typescript 2.9.2
Time: 3949ms

Newer version of vue doesn't use webpack.config.js so I cannot tweak that as was instructed in README, and I'm thinking it is related to the problem. Does vue-template-loader work under these conditions?

Thanks.

[salim-dev]

create file 'shims-html.d.ts' in src and insert

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

Add vue.config.js

.......

configureWebpack: { module: { rules: [ { test: /.html$/, loader: "vue-template-loader", exclude: /index.html/ } ] } ........

[Rouche]

@salim-dev Working for me.. Thanks!

i lost "some" time trying to use the chainWebpack ~~without~~ success.

    chainWebpack: function(config) {
        config.module
            .rule('html')
            .test(/\.html$/)
            .exclude.add(/index\.html/).end()
            .set('loader', 'vue-template-loader')
            .end();
    }

configureWebpack works but removes the comments using vue inspect.

Any idea if we can mix global and scoped styles with vue-template-loader? Like: https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles I also shim-scss.d.ts for an import like import WithRender from './helloworld.html?style=./helloworld.scss'; Ill definitely do some more test... and research with vue-loader 15 we never know.