What is the right order to insert the js files in webpack.mix.js and app.blade.php? #42045

bahiensed · 2022-04-19T17:06:49Z

bahiensed
Apr 19, 2022

I tried to migrate this fiddle into a fresh installation of Laravel + Breeze but in Laravel I receive the following error message: "app.js:430 Alpine Expression Error: myComponent is not defined"

If I make everything in a very simple standalone page/blade in Laravel, it works well. The code is:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

			<!-- Load Alpine.js -->
			<script src="https://unpkg.com/alpinejs" defer></script>
			<!-- Load d3.js -->
			<script src="https://d3js.org/d3.v7.js"></script>
    </head>

    <body>

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

		<!-- Create a div where the graph will take place -->
		<div id="my_dataviz"></div>

<script>
// 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}
];

// 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")


function myComponent(){
	return {
    // A function that create / update the plot for a given variable:
    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)
    }
  }
}
</script>

    </body>
</html>

But then, when I do it the "right" way it doesn't.

app.js:

require('./bootstrap');

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

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)

webpack.mix.js:

const mix = require('laravel-mix');

mix
    .js('resources/js/app.js', 'public/js/')
    .js('resources/js/charts/data.js', 'public/js/')


    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="csrf-token" content="{{ csrf_token() }}">

		<title>{{ config('app.name', 'Laravel') }}</title>

		<!-- Fonts -->
		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

		<!-- Styles -->
		<link rel="stylesheet" href="{{ asset('css/app.css') }}">

		<!-- Scripts -->
		<script src="{{ asset('js/app.js') }}" defer></script>

	</head>

	<body class="font-sans antialiased">
		<div class="min-h-screen bg-gray-100">
			@include('layouts.navigation')

			<!-- Page Heading -->
			<header class="bg-white shadow">
				<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
					{{ $header }}
				</div>
			</header>

			<!-- Page Content -->
			<main>
				{{ $slot }}
			</main>
		</div>
	</body>
</html>

And finally the 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>

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

</x-app-layout>

I tried to arrange the files in the order that we have in the standalone page where it works: as you can see above app.js (that contains the Alpine.js) in the head with defer and data.js just after the div with the x-data scope (without defer), so the component would be already parsed when Alpine try to bind it. I tried arrange the files in other ways, but all gave me the same error:

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

Expression: "myComponent()"

 <div x-data="myComponent()">…</div>
handleError @ app.js:430


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)

I have no clue how to solve this. How is the right order to that js files work harmonically?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

What is the right order to insert the js files in webpack.mix.js and app.blade.php? #42045

{{title}}

Replies: 0 comments

Select a reply

What is the right order to insert the js files in webpack.mix.js and app.blade.php? #42045

bahiensed Apr 19, 2022

Replies: 0 comments

bahiensed
Apr 19, 2022