Search code examples
webpackthymeleafhtml-webpack-plugin

HTML Webpack Plugin will not compile as Thymeleaf variables are undefined

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
Solution

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