Conflict with webpack-html-plugin
See original GitHub issueUsing this loader with webpack-html-plugin leads to this error:
ERROR in Error: Child compilation failed:
template syntax error Templates should only be responsible for mapping the state to the UI. Avoid placing tags with
side-effects in your templates, such as <script>, as they will not be parsed.:
template syntax error Templates should only be responsible for mapping the state to the UI. Avoid placing tags with
side-effects in your templates, such as <script>, as they will not be parsed.
- compiler.js:76
[ProjectName]/[html-webpack-plugin]/lib/compiler.js:76:16
- Compiler.js:282 Compiler.<anonymous>
[ProjectName]/[webpack]/lib/Compiler.js:282:10
- Compiler.js:479
[ProjectName]/[webpack]/lib/Compiler.js:479:13
- Tapable.js:102 next
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:102:11
- CachePlugin.js:61 Compiler.<anonymous>
[ProjectName]/[webpack]/lib/CachePlugin.js:61:4
- Tapable.js:106 Compiler.applyPluginsAsyncSeries
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:106:13
- Compiler.js:476
[ProjectName]/[webpack]/lib/Compiler.js:476:10
- Tapable.js:95 Compilation.applyPluginsAsyncSeries
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46
- Compilation.js:625
[ProjectName]/[webpack]/lib/Compilation.js:625:18
- Tapable.js:95 Compilation.applyPluginsAsyncSeries
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46
- Compilation.js:616
[ProjectName]/[webpack]/lib/Compilation.js:616:10
- Tapable.js:95 Compilation.applyPluginsAsyncSeries
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46
- Compilation.js:611
[ProjectName]/[webpack]/lib/Compilation.js:611:9
- Tapable.js:95 Compilation.applyPluginsAsyncSeries
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46
- Compilation.js:607 sealPart2
[ProjectName]/[webpack]/lib/Compilation.js:607:8
- Tapable.js:95 Compilation.applyPluginsAsyncSeries
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46
- From previous event:
- compiler.js:69 Object.compileTemplate
[ProjectName]/[html-webpack-plugin]/lib/compiler.js:69:10
- index.js:47 Compiler.<anonymous>
[ProjectName]/[html-webpack-plugin]/index.js:47:40
- Tapable.js:193 Compiler.applyPluginsParallel
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:193:14
- Compiler.js:468
[ProjectName]/[webpack]/lib/Compiler.js:468:8
- Tapable.js:95 Compiler.applyPluginsAsyncSeries
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:95:46
- Compiler.js:461 Compiler.compile
[ProjectName]/[webpack]/lib/Compiler.js:461:7
- Compiler.js:47
[ProjectName]/[webpack]/lib/Compiler.js:47:17
- Tapable.js:102 next
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:102:11
- Shared.js:138 Compiler.compilerInvalid
[ProjectName]/[webpack-dev-middleware]/lib/Shared.js:138:5
- Tapable.js:104 next
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:104:14
- CachePlugin.js:31 Compiler.<anonymous>
[ProjectName]/[webpack]/lib/CachePlugin.js:31:4
- Tapable.js:106 Compiler.applyPluginsAsyncSeries
[ProjectName]/[webpack]/[tapable]/lib/Tapable.js:106:13
- Compiler.js:45 Watching._go
[ProjectName]/[webpack]/lib/Compiler.js:45:16
- Compiler.js:36 Watching.<anonymous>
[ProjectName]/[webpack]/lib/Compiler.js:36:8
- Compiler.js:371 Compiler.readRecords
[ProjectName]/[webpack]/lib/Compiler.js:371:10
- Compiler.js:33 new Watching
[ProjectName]/[webpack]/lib/Compiler.js:33:16
- Compiler.js:205 Compiler.watch
[ProjectName]/[webpack]/lib/Compiler.js:205:17
- Shared.js:153 Object.startWatch
[ProjectName]/[webpack-dev-middleware]/lib/Shared.js:153:29
- Shared.js:215 Shared
[ProjectName]/[webpack-dev-middleware]/lib/Shared.js:215:8
The fix is easy, just tell webpack and vue-template-loader to include only files from source directory or to exclude index.hml if it is in src
as well:
{
test: /\.html$/,
include: [
path.resolve('src')
],
loader: 'vue-template-loader'
}
Maybe it’s worth to mention about this in the readme?
Issue Analytics
- State:
- Created 7 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Conflict with html-webpack-plugin on catch all route · Issue #46
I have a single page app and I am using the middleware during dev. I want to route all requests in express to...
Read more >HtmlWebpackPlugin | webpack
The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash...
Read more >Why typescript loader cause to errors in html webpack plugin?
I fixed the problem with the following command: npm install --save @types/html-webpack-plugin.
Read more >html-webpack-plugin 5.x alpha html-loader - CodeSandbox
CodeSandbox is an online editor tailored for web applications.
Read more >HTML and Static Assets - Vue CLI
html is a template that will be processed with html-webpack-plugin. During build, asset links will be injected automatically. In addition, Vue ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks for the further information and the reproduction. But as this behavior seems to be expected on html-webpack-plugin and it is already noted on the readme, I think it is not related to this loader.
hmm I don’t think so, I didn’t use html-loader at all