Importing html files with es6 template string loader

Question

I want to import my templates into my js with es6 template string loader. The only difference in my case is that I don't want to include css, only html. My code is as follows:

import app from '../../bootstrap.js'; import template from './header.html';  app.component('siteHeader', {   template }); 

and my error is Uncaught SyntaxError: Unexpected token export.

Answer 1

I recently needed to do the same thing, and this is how I did it.

1. I used the npm module html-loader, instead of es6-template-string-loader

2. Add to webpack.config.js

Webpack 3

... module: {     rules: [         {             test: /\.html$/,             exclude: /node_modules/,             use: {loader: 'html-loader'}         }     ] } ... 

Webpack 1 (deprecated, but from original answer):

... module: {     loaders: [         {             test: /\.html$/,             loader: "html-loader"         }     ] } ... 

3. Use in your JS files

import template from './header.html'; 

Answer 2

The solution posted here is correct. Just adding an info to the error i faced when implementing the solution mentioned.

I got the error: TS2307: Cannot find module './index3.html'
This was because of typescript compilation error. The work around was here

Had to define a file: html.d.ts containing the below

declare module '*.html' {   const value: string;   export default value }