Alpine Expression Error: myComponent is not defined / Uncaught ReferenceError: myComponent is not defined

[bahiensed]

I'm able to plot and interact with a barchart using Alpine.js and D3.js. It works pretty well as you can see in this fiddle. But when I transpose the code into Laravel 9 with Alpine 3, no matter where I put the js code (in the head, in the bottom of the body, just before the buttons) it always says the component is not defined.

I'm running everything in a Raspberry Pi 4 with 8MB RAM, serving with nginx and using Chromium 98.0.4758.106.

Here you have the main codes (almost just like in the fiddle) in a fresh Laravel 9 + Breeze installation:

dashboard.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">

			<div x-data="myComponent()">
				<button x-on:click="update(data1)">Data 1</button>
				<button x-on:click="update(data2)">Data 2</button>						
			</div>

			<div id="my_dataviz"></div>
                </div>
            </div>
        </div>
    </div>

</x-app-layout>

<script src="{{ asset('js/data.js') }}" defer></script>

And here the data.js

import * as d3 from 'd3';

// set the dimensions and margins of the graph
const margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// Initialize the X axis
const x = d3.scaleBand()
  .range([ 0, width ])
  .padding(0.2);
const xAxis = svg.append("g")
  .attr("transform", `translate(0,${height})`)

// Initialize the Y axis
const y = d3.scaleLinear()
  .range([ height, 0]);
const yAxis = svg.append("g")
  .attr("class", "myYaxis")

// create 2 data_set
const data1 = [
   {group: "A", value: 4},
   {group: "B", value: 16},
   {group: "C", value: 8}
];

const data2 = [
   {group: "A", value: 7},
   {group: "B", value: 1},
   {group: "C", value: 20},
   {group: "D", value: 10}
];

	function myComponent(){
		return{
			hello(){
				alert('Hello!');
			},

			update(data) {

			  // Update the X axis
			  x.domain(data.map(d => d.group))
			  xAxis.call(d3.axisBottom(x))

			  // Update the Y axis
			  y.domain([0, d3.max(data, d => d.value) ]);
			  yAxis.transition().duration(1000).call(d3.axisLeft(y));

			  // Create the u variable
			  var u = svg.selectAll("rect")
			    .data(data)

			  u
			    .join("rect") // Add a new rect for each new elements
			    .transition()
			    .duration(1000)
			      .attr("x", d => x(d.group))
			      .attr("y", d => y(d.value))
			      .attr("width", x.bandwidth())
			      .attr("height", d => height - y(d.value))
			      .attr("fill", "#69b3a2")
			}

		}
	}

// Initialize the plot with the first dataset
//update(data1)

And finally the error messages:

app.js:430 Alpine Expression Error: myComponent is not defined

Expression: "myComponent()"

 div_x_attributeCleanups: {x-data: Array(1)}_x_dataStack: [Proxy]accessKey: ""align: ""ariaAtomic: nullariaAutoComplete: nullariaBusy: nullariaChecked: nullariaColCount: nullariaColIndex: nullariaColSpan: nullariaCurrent: nullariaDescription: nullariaDisabled: nullariaExpanded: nullariaHasPopup: nullariaHidden: nullariaKeyShortcuts: nullariaLabel: nullariaLevel: nullariaLive: nullariaModal: nullariaMultiLine: nullariaMultiSelectable: nullariaOrientation: nullariaPlaceholder: nullariaPosInSet: nullariaPressed: nullariaReadOnly: nullariaRelevant: nullariaRequired: nullariaRoleDescription: nullariaRowCount: nullariaRowIndex: nullariaRowSpan: nullariaSelected: nullariaSetSize: nullariaSort: nullariaValueMax: nullariaValueMin: nullariaValueNow: nullariaValueText: nullassignedSlot: nullattributeStyleMap: StylePropertyMap {size: 0}attributes: NamedNodeMap {0: x-data, x-data: x-data, length: 1}autocapitalize: ""autofocus: falsebaseURI: "http://localhost/"childElementCount: 2childNodes: NodeList(5) [text, button, text, button, text]children: HTMLCollection(2) [button, button]classList: DOMTokenList [value: '']className: ""clientHeight: 24clientLeft: 0clientTop: 0clientWidth: 749contentEditable: "inherit"dataset: DOMStringMap {}dir: ""draggable: falseelementTiming: ""enterKeyHint: ""firstChild: textfirstElementChild: buttonhidden: falseid: ""innerHTML: "\n\t\t\t\t\t\t\t<button x-on:click=\"update(data1)\">Data 1</button>\n\t\t\t\t\t\t\t<button x-on:click=\"update(data2)\">Data 2</button>\t\t\t\t\t\t\n\t\t\t\t\t\t"innerText: "Data 1 Data 2"inputMode: ""isConnected: trueisContentEditable: falselang: ""lastChild: textlastElementChild: buttonlocalName: "div"namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: div#my_dataviznextSibling: textnodeName: "DIV"nodeType: 1nodeValue: nullnonce: ""offsetHeight: 24offsetLeft: 48offsetParent: body.font-sans.antialiasedoffsetTop: 210offsetWidth: 749onabort: nullonanimationend: nullonanimationiteration: nullonanimationstart: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonbeforexrselect: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullonformdata: nullonfullscreenchange: nullonfullscreenerror: nullongotpointercapture: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerrawupdate: nullonpointerup: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonsecuritypolicyviolation: nullonseeked: nullonseeking: nullonselect: nullonselectionchange: nullonselectstart: nullonslotchange: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullontransitioncancel: nullontransitionend: nullontransitionrun: nullontransitionstart: nullonvolumechange: nullonwaiting: nullonwebkitanimationend: nullonwebkitanimationiteration: nullonwebkitanimationstart: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwebkittransitionend: nullonwheel: nullouterHTML: "<div x-data=\"myComponent()\">\n\t\t\t\t\t\t\t<button x-on:click=\"update(data1)\">Data 1</button>\n\t\t\t\t\t\t\t<button x-on:click=\"update(data2)\">Data 2</button>\t\t\t\t\t\t\n\t\t\t\t\t\t</div>"outerText: "Data 1 Data 2"ownerDocument: documentparentElement: div.p-6.bg-white.border-b.border-gray-200parentNode: div.p-6.bg-white.border-b.border-gray-200part: DOMTokenList [value: '']prefix: nullpreviousElementSibling: nullpreviousSibling: textscrollHeight: 24scrollLeft: 0scrollTop: 0scrollWidth: 749shadowRoot: nullslot: ""spellcheck: truestyle: CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}tabIndex: -1tagName: "DIV"textContent: "\n\t\t\t\t\t\t\tData 1\n\t\t\t\t\t\t\tData 2\t\t\t\t\t\t\n\t\t\t\t\t\t"title: ""translate: truevirtualKeyboardPolicy: ""[[Prototype]]: HTMLDivElement
handleError @ app.js:430
(anonymous) @ app.js:496
Promise.catch (async)
(anonymous) @ app.js:496
tryCatch @ app.js:423
evaluate @ app.js:441
(anonymous) @ app.js:2621
(anonymous) @ app.js:1152
flushHandlers @ app.js:553
stopDeferring @ app.js:558
deferHandlingDirectives @ app.js:561
initTree @ app.js:764
(anonymous) @ app.js:724
start @ app.js:723
./resources/js/app.js @ app.js:5104
__webpack_require__ @ app.js:22578
(anonymous) @ app.js:22731
__webpack_require__.O @ app.js:22615
(anonymous) @ app.js:22733
(anonymous) @ app.js:22735

app.js:434 Uncaught ReferenceError: myComponent is not defined
    at eval (eval at safeAsyncFunction (app.js:478:14), <anonymous>:3:16)
    at app.js:496:21
    at tryCatch (app.js:423:12)
    at evaluate (app.js:441:32)
    at app.js:2621:15
    at Function.<anonymous> (app.js:1152:55)
    at flushHandlers (app.js:553:46)
    at stopDeferring (app.js:558:5)
    at deferHandlingDirectives (app.js:561:3)
    at initTree (app.js:764:3)
eval @ VM239:3
(anonymous) @ app.js:496
tryCatch @ app.js:423
evaluate @ app.js:441
(anonymous) @ app.js:2621
(anonymous) @ app.js:1152
flushHandlers @ app.js:553
stopDeferring @ app.js:558
deferHandlingDirectives @ app.js:561
initTree @ app.js:764
(anonymous) @ app.js:724
start @ app.js:723
./resources/js/app.js @ app.js:5104
__webpack_require__ @ app.js:22578
(anonymous) @ app.js:22731
__webpack_require__.O @ app.js:22615
(anonymous) @ app.js:22733
(anonymous) @ app.js:22735
setTimeout (async)
handleError @ app.js:433
(anonymous) @ app.js:496
Promise.catch (async)
(anonymous) @ app.js:496
tryCatch @ app.js:423
evaluate @ app.js:441
(anonymous) @ app.js:2621
(anonymous) @ app.js:1152
flushHandlers @ app.js:553
stopDeferring @ app.js:558
deferHandlingDirectives @ app.js:561
initTree @ app.js:764
(anonymous) @ app.js:724
start @ app.js:723
./resources/js/app.js @ app.js:5104
__webpack_require__ @ app.js:22578
(anonymous) @ app.js:22731
__webpack_require__.O @ app.js:22615
(anonymous) @ app.js:22733
(anonymous) @ app.js:22735

== EDIT 1 ==
Based on #2828 I had deleted defer from the script call, so the js file doesn't load necessary after page load. Unfortunatelly the error still occurs.

[niels-numbers]

defer should not be the problem. I think the issue is rather that your function "mycomponent" was not loaded before alpine is loaded.
Make sure data.js is loaded before alpine is loaded, and also check your console, maybe data.js throws an error and that's the reason why it can't find "mycomponent"