title: Alpine Expression Error: createFormComponent is not defined
body: <p>I am using Alpine JS in .NET Core 6 MVC project. I have loaded the alpine js file from <a href="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" rel="nofollow noreferrer">https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js</a>. I then added the following code in the Home/Index.cshtml file.</p>
  <pre><code>&lt;form id=&quot;myForm&quot;
    x-data=&quot;createFormComponent()&quot; 
    x-on:submit.prevent=&quot;onSubmit&quot;&gt;
  
    &lt;input id=&quot;email&quot; type=&quot;text&quot; name=&quot;email&quot; 
      x-model=&quot;email&quot; /&gt;
  
    &lt;span class=&quot;error&quot; style=&quot;display: none&quot;
      x-show=&quot;error&quot;
      x-text=&quot;error&quot;
    &gt;&lt;/span&gt;
  
    &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  @section Scripts {
  
     &lt;script&gt;
    (function () {
      'use strict';
  
      window.createFormComponent = function () {
        return {
          email: '',
          error: '',
  
          onSubmit($event) {
            this.error = !this.email 
              ? 'You must enter an email address' 
              : '';
          },
        };
      };
    })();
  &lt;/script&gt;
  
  }
  </code></pre>
  <p>But when I access the page in the browser, it always throws the error &quot;Alpine Expression Error: createFormComponent is not defined&quot;. I have tried to put it into a js file and load it. Also tried to define the component in alpine:init event. None of them worked. The same code works in plain html file served from IIS. I am not sure what is wrong here. Can anyone please help.</p>