search

ktsn / vue-template-loader

Vue.js 2.0 template loader for webpack
MIT License
266 stars 26 forks source link

Not working properly with newer vue? #52

Open kissge opened 6 years ago

kissge commented 6 years ago

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 commented 6 years ago

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 | FunctionalComponentOptions>(options: U): U

(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 commented 6 years ago

@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.