HTML Webpack Plugin will not compile as Thymeleaf variables are undefined

Question

HTML Webpack Plugin will not compile as Thymeleaf variables are undefined

2.8k views Asked by Ben Bullock At 20 September 2024 at 09:51

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

Original Q&A

There are 3 answers

Raul Bejarano On 14 December 2017 at 08:54

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 ;)

Nick On 17 April 2019 at 09:28

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

**Aled Evans** · Accepted Answer · 2018-10-13 14:27:45

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 %>"/>

TechQA.

HTML Webpack Plugin will not compile as Thymeleaf variables are undefined

There are 3 answers

Related Questions in WEBPACK

Related Questions in THYMELEAF

Related Questions in HTML-WEBPACK-PLUGIN

Popular Questions

Popular Tags

Trending Questions