HTML Webpack Plugin will not compile as Thymeleaf variables are undefined

Question

When Webpack compiles my app which contains the below HTML, it complains the theme variable is undefined.

Here is my index.html file:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
</head>
<body th:class="${theme}">
    <div id="root"></div>
</body>
</html>

And here is the error I get:

Failed to compile.

Error in Template execution failed: ReferenceError: theme is not defined

- loader.js:4 eval
/src/main/resources/templates/index.html?./~/html-webpack-plugin/lib/loader.js:4:10

score 4 · Answer 1 · answered Apr 17 '19 at 09:28

4

My workaround: replace $ to <%="$"%>

answered Apr 17 '19 at 09:28

Nick

3,691
18
36

score 3 · Answer 2 · answered Dec 14 '17 at 08:54

3

Same error here. I've found this issue and you have just to make webpack use 'html-loader' like this:

new HtmlWebpackPlugin({
    template: '!!html-loader!index.html'
})

PS: Don't forget to install it before with npm ;)

answered Dec 14 '17 at 08:54

Raul Bejarano

86
7

can you please explain how to use this into vue.config.js? – DeejonZ Dec 20 '18 at 17:19

score 2 · Accepted Answer · answered Oct 13 '18 at 14:27

Put this in :

webpack.config

new HtmlWebpackPlugin({
     template: './index.ejs',
     filename: './index.html',
     minify: { collapseWhitespace: true },
     csrf: '${_csrf.token}',
}),

in your index.ejs file put :

<meta name="_csrf" th:content="<%= htmlWebpackPlugin.options.csrf %>"/>

HTML Webpack Plugin will not compile as Thymeleaf variables are undefined

3 Answers3

Linked