JSF error: Target Unreachable, identifier 'bean' resolved to null

Question

I'm playing around with CDI in Java EE, but it doesn't seem to work.

I have a very simple example with 2 text fields. When entering the name and submit, the entered name should appear on the next page.

But instead I get the following error:

HTTP Status 500 - Internal Server Error

javax.servlet.ServletException: /index.xhtml @12,72 value="#{userBean.firstName}": Target Unreachable, identifier 'userBean' resolved to null

javax.el.PropertyNotFoundException: /index.xhtml @12,72 value="#{userBean.firstName}": Target Unreachable, identifier 'userBean' resolved to null

javax.el.PropertyNotFoundException: Target Unreachable, identifier 'userBean' resolved to null

---

These are my 3 files:

index.xhtml

<h:form>
    <h:panelGrid columns="2">
        <h:outputLabel value="First name" for="firstName"/>
        <h:inputText id="firstName" value="#{userBean.firstName}"/>


        <h:outputLabel value="Last name" for="lastName"/>
        <h:inputText id="lastName" value="#{userBean.lastName}"/>
      <h:commandButton action="result" value="send"/>
    </h:panelGrid>
</h:form>

result.xhtml

First name: #{userBean.firstName}
Last name: #{userBean.lastName}

UserBean.java

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class UserBean {

    private String firstName;
    private String lastName;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

}