'Thymeleaf is trying to build a html which does not exist and which is not called anywhere

I am trying to build a spring mvc app with spring boot and thymeleaf. I am trying to create a form to insert an object into my data base (something which I already do in my app and is working) but I constantly find this error:

org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "ServletContext resource [/WEB-INF/views/error.html]")
(...)
Caused by: java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/views/error.html]
(...)

This is the problem you usually find when you are trying to reference a template which does not exist or has a different name. Here's the thing. There is no Error.html in my views' folder as you can see in the print below:

Can anyone help me understand what's going on?

EDIT with more information:

Below you can find the endpoints which are giving me trouble:

@GetMapping("{id}/add-expense")
public String expensesForm(Model model, @PathVariable Long id){
   model.addAttribute("expense", new Expenses());
   model.addAttribute("budgetId", id);
   return "expenseForm";
}

@PostMapping("{id}/add-expense")
public String expenseSubmitted(@ModelAttribute Expenses expense, @PathVariable Long id, Model model){
   Budgets budget = budgetsRepository.getById(id);
   if(budget != null){
      budget.addExpense(expense);
      expense.setBudget(budget);
      expensesRepository.saveAndFlush(expense);
   }
   else{
      throw new ResponseStatusException(HttpStatus.NOT_FOUND, "not all variables there");
   }
   model.addAttribute("expense", expense);
   return "expenseResult";
}

The GET endpoint seems to be working as intended. When I load the "id/add-expense" path it displays the page "expenseForm" correctly. The problem comes when I try to submit the form in the "expenseForm" template and go to the POST for "id/add-expenses". That is when I get a 400 bad request response. I am lead to believe that the problem might be that the "expenseForm" cannot correctly populate the @ModelAttribute in the POST method but I can't say why or how to fix it. In the console, I am given the error above which tells me that Thymeleaf cannot find the template for "error.html".

expenseForm.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>Expense Creation</title>
</head>
<body>
<div class="container">
  <div class="container">
    <div th:insert="fragments/navbar.html"> </div>

    <div class="jumbotron">
      <div class="row">
        <h3>Expense Creation</h3>
      </div>
      <form action="#" th:action="@{/budgets/{id}/add-expense(id = ${budgetId})}" th:object="${expense}" method="post">
        <p>Name: <input type="text" th:field="*{expenses_name}" /></p>
        <p>Amount: <input type="number" th:field="*{expenses_amount}" /></p>
        <p>Date: <input type="text" th:field="*{expenses_date}" /></p>
        <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
      </form>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</div>
</body>
</html>

expenseResult.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Expense Creation</title>
</head>
<body>
<div class="container">
    <div class="container">
        <div th:insert="fragments/navbar.html"> </div>

        <div class="jumbotron">
            <div class="row">
                <h3>Expense Created</h3>
            </div>
            <p th:text="'Name: ' + ${expense.expenses_name}" />
            <p th:text="'Amount: ' + ${expense.expenses_amount}" />
            <p th:text="'Date: ' + ${expense.expenses_date}" />
            <a href="expenses">Submit another expense</a>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="js/budgetScript.js"></script>
</div>
</body>
</html>

Class Expenses:

@Entity(name = "expenses")
@JsonIgnoreProperties({"hibernateLazyInitializer", "handler"})
public class Expenses {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long expenses_id;
    private String expenses_name;
    private Integer expenses_amount;
    private Date expenses_date;

    @ManyToOne
    @JoinTable(
            name = "budget_expenses",
            joinColumns = @JoinColumn(name = "expenses_id"),
            inverseJoinColumns = @JoinColumn(name = "budgets_id"))
    private Budgets budget;

    //Gettes setters and constructor
}

Thank you in advance.

EDIT 2 after changing the name of "expenseResult.html" to "error.html":

So I decided to follow the tip from andrewJames and I changed the name of "expenseResult.html" to "error.html". I also changed the return value in the POST method from 'return "expenseResult"' to 'return "error"' and I am no longer given the 400 bad request error on the application. Instead, I am given the "error.html" page but the fields for expense.expenses_name, expense.expenses_amount or expense.expenses_date are not shown in the page. It is just an empty page with the "Expense Creation" text. In the console I receive a new error:

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "expense.expenses_name" (template: "error" - line 19, col 16)
(...)
Caused by: org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'expenses_name' cannot be found on null
(...)

From what we can see, the application cannot retrieve the fields from null, meaning that the @ModelAttribute Expenses expense is not returning the correct values from the form page. It more or less confirms my suspicion that the problem was in the modelAttribute but I continue to not know how to correct the problem since I have tried to verify multiple times if everything was okay and I found no issue. I also don't understand why it is looking for a "error.html" file considering that I had no prior mention to such a file in my code and project.

EDIT 3 after using ModelandView intead of ModelAttribute:

Following dsp_user's suggestion. I started by hardcoding the path with "/budgets/10/add-expense" instead of using {id} and the problem remained, which makes me believe that the problem is not the path.

I started using the ModelAndView, as can be shown below, but I continued to have the same problem as before (400 bad request).

@PostMapping("{id}/add-expense")
    public ModelAndView expenseSubmitted(@ModelAttribute("expenses") Expenses expenses, @PathVariable Long id, Model model){
        System.out.println("here");
        Budgets budget = budgetsRepository.getById(id);
        if(budget != null){
            budget.addExpense(expenses);
            expenses.setBudget(budget);
            expensesRepository.saveAndFlush(expenses);
        }
        else{
            throw new ResponseStatusException(HttpStatus.NOT_FOUND, "not all variables there");
        }
        ModelAndView modelAndView = new ModelAndView("expenseResult");
        modelAndView.addObject("expense", expenses);
        return modelAndView;
    }

EDIT 4 to add the Budgets logic:

Budgets:

@Entity(name = "budgets")
@JsonIgnoreProperties({"hibernateLazyInitializer", "handler"})
public class Budgets {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long budgets_id;
    private String budgets_name;
    private String budgets_description;
    private Integer budgets_amount;

    @OneToMany(mappedBy = "budget")
    @JsonIgnore
    private List<Expenses> expenses;

    @Transient
    public float budgets_expense_sum = 0;

//Gettes setters and constructor
}

Budget Creation Endpoints:

@GetMapping("new")
    public String budgetsForm(Model model){
        model.addAttribute("budget", new Budgets());
        return "budgetForm";
    }

    @PostMapping("new")
    public String budgetSubmitted(@ModelAttribute Budgets budget, Model model){
        budgetsRepository.saveAndFlush(budget);
        model.addAttribute("budget", budget);
        return "budgetResult";

BudgetForm.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>Budget Creation</title>
</head>
<body>
<div class="container">
  <div class="container">
    <div th:insert="fragments/navbar.html"> </div>

    <div class="jumbotron">
      <div class="row">
        <h3>Budget Creation</h3>
      </div>
      <form action="#" th:action="@{/budgets/new}" th:object="${budget}" method="post">
        <p>Name: <input type="text" th:field="*{budgets_name}" /></p>
        <p>Description: <input type="text" th:field="*{budgets_description}" /></p>
        <p>Monthly Amount: <input type="number" th:field="*{budgets_amount}" /></p>
        <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
      </form>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</div>
</body>
</html>

BudgetResult.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Budget Creation</title>
</head>
<body>
<div class="container">
    <div class="container">
        <div th:insert="fragments/navbar.html"> </div>

        <div class="jumbotron">
            <div class="row">
                <h3>Budget Created</h3>
            </div>
            <p th:text="'Name: ' + ${budget.budgets_name}" />
            <p th:text="'Description: ' + ${budget.budgets_description}" />
            <p th:text="'Amount: ' + ${budget.budgets_amount}" />
            <a href="new">Submit another message</a>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="js/budgetScript.js"></script>
</div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Thymeleaf is trying to build a html which does not exist and which is not called anywhere

Sources

Related Questions