search

wireui / wireui

TallStack UI components
https://v1.wireui.dev
MIT License
1.37k stars 166 forks source link

Livewire Entangle Error #804

Open abbasmashaddy72 opened 6 months ago

abbasmashaddy72 commented 6 months ago

Describe the bug I have created a Livewire Component where there are an array of async select data But having an issue of Livewire Entangle. It is working fine when using single entry but when I what to create a loop it's showing error of Livewire Entangle Error: Livewire property ['country_id_pv.0'] cannot be found on component: ['backend.form-product']

To Reproduce Steps to reproduce the behavior:

<div class="grid grid-cols-4 items-end gap-2 p-4">
  <x-select label="{{ __('Select Origin Country') }}" wire:model="country_id_pv.0"
      placeholder="Select Origin Country" :async-data="route('api.admin.countries')" option-label="name"
      option-value="id" required />
</div>

@foreach ($inputs_pv as $key => $input_value)
<div class="grid grid-cols-4 items-end gap-2 p-4">
  <x-select label="{{ __('Select Origin Country') }}"
      wire:model="country_id_pv.{{ $input_value }}"
      placeholder="Select Origin Country" :async-data="route('api.admin.countries')" option-label="name"
      option-value="id" required />
</div>

public $country_id_pv = [];
public $vendor_id_pv = [];
public $brand_id_pv = [];

Expected behavior I accept that it is it show convert the select data keys to array to save it.

Dependencies

Additional context I similarly have 3 arrays of select async data, similar issue:

livewire.esm.js:7490

Livewire Entangle Error: Livewire property ['country_id_pv.0'] cannot be found on component: ['backend.form-product']

import_alpinejs.default.interceptor.Object.defineProperty.get.isLive @ livewire.esm.js:7490
initialize @ livewire.esm.js:1721
(anonymous) @ livewire.esm.js:1705
recurse @ livewire.esm.js:1700
initInterceptors2 @ livewire.esm.js:1713
(anonymous) @ livewire.esm.js:3383
flushHandlers @ livewire.esm.js:1948
stopDeferring @ livewire.esm.js:1953
deferHandlingDirectives @ livewire.esm.js:1956
initTree @ livewire.esm.js:1467
(anonymous) @ livewire.esm.js:1422
start2 @ livewire.esm.js:1421
start @ livewire.esm.js:8970
(anonymous) @ app.js:22

livewire.esm.js:7490

Livewire Entangle Error: Livewire property ['vendor_id_pv.0'] cannot be found on component: ['backend.form-product']

livewire.esm.js:7490

Livewire Entangle Error: Livewire property ['brand_id_pv.0'] cannot be found on component: ['backend.form-product']
DiegoAlonso27 commented 6 months ago

by any chance have you installed alpine js in your laravel project?

https://livewire.laravel.com/docs/upgrading#alpinejs

abbasmashaddy72 commented 6 months ago

Yes, it is already installed it

Below is my app.js

// CSS imports
import "../../css/backend/app.css";
import "./bootstrap";

// JavaScript libraries
import focus from "@alpinejs/focus";
import { createPopper } from "@popperjs/core";
import * as FilePond from "filepond";
import flatpickr from "flatpickr";
import {
    Alpine,
    Livewire,
} from "../../../vendor/livewire/livewire/dist/livewire.esm";

// Expose to global scope
window.flatpickr = flatpickr;
window.FilePond = FilePond;
window.createPopper = createPopper;

// Alpine.js setup
Alpine.plugin(focus);
Livewire.start();

// 3rd Party Libraries
import "../../../vendor/power-components/livewire-powergrid/dist/powergrid";
import "../../../vendor/wire-elements/modal/resources/js/modal";

// Midone Built-in Components
import "@left4code/tw-starter/dist/js/dropdown";

// Components
import "./components/datepicker";
// import "./components/feather";
import "./components/mobile-menu";
import "./components/new-dark-mode-switcher";
import "./components/side-menu";
import "./components/side-menu-tooltip";

// Custom Components
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import lightbox from "lightbox2";
window.ClassicEditor = ClassicEditor;
window.lightbox = lightbox;
DiegoAlonso27 commented 6 months ago

you should remove it since livewire 3 comes with alpine js by default.

image

abbasmashaddy72 commented 6 months ago

Thanks, Brother, it worked for me.

Actually I was using it with the second step integrated it manually within app.js using the below instruction from livewire docs

image

Can you help me with the other issue I am facing is unable to compile all the classes of livewire some issue with my tailwind.config file

The Frontend Config Just works fine and compiling all the assets when compare to backend it does not compile all

Backend Config

const colors = require("tailwindcss/colors");
const {
    toRGB,
    withOpacityValue,
} = require("@left4code/tw-starter/dist/js/tailwind-config-helper");

/** @type {import('tailwindcss').Config} */
module.exports = {
    mode: "jit",
    presets: [
        require("../../../vendor/power-components/livewire-powergrid/tailwind.config.js"),
        require("../../../vendor/wireui/wireui/tailwind.config.js"),
    ],
    content: [
        "./app/Livewire/Backend/**/*.php",
        "./resources/views/components/auth/**/*.blade.php",
        "./resources/views/components/backend/**/*.blade.php",
        "./resources/views/layouts/bePartials/**/*.blade.php",
        "./resources/views/layouts/app.blade.php",
        "./resources/views/livewire/backend/**/*.blade.php",
        "./resources/views/pages/backend/**/*.blade.php",
        "./resources/views/profile/**/*.blade.php",
        "./resources/views/vendor/**/*.blade.php",
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./vendor/power-components/livewire-powergrid/resources/views/**/*.php",
        "./vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php",
        "./vendor/wire-elements/modal/resources/views/*.blade.php",
        "./vendor/wireui/wireui/src/**/*.php",
        "./vendor/wireui/wireui/ts/**/*.ts",
        "./vendor/wireui/wireui/src/View/**/*.php",
        "./vendor/wireui/wireui/resources/**/*.blade.php",
    ],
    darkMode: "class",
    options: {
        safelist: [
            "sm:max-w-2xl",
            {
                pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
                variants: ["sm", "md", "lg", "xl", "2xl"],
            },
        ],
    },
    theme: {
        extend: {
            colors: {
                "pg-primary": colors.gray,
                rgb: toRGB(colors),
                primary: withOpacityValue("--color-primary"),
                secondary: withOpacityValue("--color-secondary"),
                success: withOpacityValue("--color-success"),
                info: withOpacityValue("--color-info"),
                warning: withOpacityValue("--color-warning"),
                pending: withOpacityValue("--color-pending"),
                danger: withOpacityValue("--color-danger"),
                light: withOpacityValue("--color-light"),
                dark: withOpacityValue("--color-dark"),
                slate: {
                    50: withOpacityValue("--color-slate-50"),
                    100: withOpacityValue("--color-slate-100"),
                    200: withOpacityValue("--color-slate-200"),
                    300: withOpacityValue("--color-slate-300"),
                    400: withOpacityValue("--color-slate-400"),
                    500: withOpacityValue("--color-slate-500"),
                    600: withOpacityValue("--color-slate-600"),
                    700: withOpacityValue("--color-slate-700"),
                    800: withOpacityValue("--color-slate-800"),
                    900: withOpacityValue("--color-slate-900"),
                },
                darkmode: {
                    50: withOpacityValue("--color-darkmode-50"),
                    100: withOpacityValue("--color-darkmode-100"),
                    200: withOpacityValue("--color-darkmode-200"),
                    300: withOpacityValue("--color-darkmode-300"),
                    400: withOpacityValue("--color-darkmode-400"),
                    500: withOpacityValue("--color-darkmode-500"),
                    600: withOpacityValue("--color-darkmode-600"),
                    700: withOpacityValue("--color-darkmode-700"),
                    800: withOpacityValue("--color-darkmode-800"),
                    900: withOpacityValue("--color-darkmode-900"),
                },
            },
            fontFamily: {
                roboto: ["Roboto"],
            },
            container: {
                center: true,
            },
            maxWidth: {
                "1/4": "25%",
                "1/2": "50%",
                "3/4": "75%",
            },
            strokeWidth: {
                0.5: 0.5,
                1.5: 1.5,
                2.5: 2.5,
            },
        },
    },
    plugins: [
        require("@tailwindcss/forms")({
            strategy: "class",
        }),
        require("postcss-multiple-tailwind"),
    ],
    variants: {
        extend: {
            boxShadow: ["dark"],
        },
    },
};

Frontend Config

const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");

/** @type {import('tailwindcss').Config} */
module.exports = {
    mode: "jit",
    presets: [require("../../../vendor/wireui/wireui/tailwind.config.js")],
    content: [
        "./app/Http/Livewire/Frontend/**/*.php",
        "./resources/views/components/frontend/**/*.blade.php",
        "./resources/views/auth/**/*.blade.php",
        "./resources/views/layouts/guest.blade.php",
        "./resources/views/layouts/fePartials/**/*.blade.php",
        "./resources/views/layouts/fePartials/**/*.blade.php",
        "./resources/views/livewire/frontend/**/*.blade.php",
        "./resources/views/pages/frontend/**/*.blade.php",
        "./resources/views/vendor/wireui/**/*.blade.php",
        "./resources/views/vendor/cookie-consent/**/*.blade.php",
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./vendor/wire-elements/modal/resources/views/*.blade.php",
        "./vendor/wireui/wireui/src/**/*.php",
        "./vendor/wireui/wireui/ts/**/*.ts",
        "./vendor/wireui/wireui/src/View/**/*.php",
        "./vendor/wireui/wireui/resources/**/*.blade.php",
        "./node_modules/flowbite/**/*.js",
    ],
    options: {
        safelist: ["sm:max-w-2xl"],
    },
    darkMode: "class",
    important: true,
    theme: {
        screens: {
            xs: "540px",
            sm: "640px",
            md: "768px",
            lg: "1024px",
            xl: "1280px",
            "2xl": "1536px",
        },
        fontFamily: {
            nunito: ['"Nunito", sans-serif'],
            inter: ["Inter"],
        },
        container: {
            center: true,
            padding: {
                DEFAULT: "12px",
                sm: "1rem",
                lg: "45px",
                xl: "2rem",
                "2xl": "5rem",
            },
        },
        extend: {
            colors: {
                dark: "#3c4858",
                black: "#161c2d",
                "dark-footer": "#192132",
            },
            boxShadow: {
                sm: "0 2px 4px 0 rgb(60 72 88 / 0.15)",
                DEFAULT: "0 0 3px rgb(60 72 88 / 0.15)",
                md: "0 5px 13px rgb(60 72 88 / 0.20)",
                lg: "0 10px 25px -3px rgb(60 72 88 / 0.15)",
                xl: "0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)",
                "2xl": "0 25px 50px -12px rgb(60 72 88 / 0.25)",
                inner: "inset 0 2px 4px 0 rgb(60 72 88 / 0.05)",
                testi: "2px 2px 2px -1px rgb(60 72 88 / 0.15)",
            },
            spacing: {
                0.75: "0.1875rem",
                3.25: "0.8125rem",
            },

            maxWidth: ({ theme, breakpoints }) => ({
                1200: "71.25rem",
                992: "60rem",
                768: "45rem",
            }),

            zIndex: {
                1: "1",
                2: "2",
                3: "3",
                999: "999",
            },
        },
    },
    plugins: [
        require("flowbite/plugin"),
        require("tailwind-scrollbar-hide"),
        require("postcss-multiple-tailwind"),
    ],
};
abbasmashaddy72 commented 6 months ago

Again the same issue has started, No Alpine JS is Added in the app.js but still same issue presides

DiegoAlonso27 commented 6 months ago

What is the problem you are having?

Again the same issue has started, No Alpine JS is Added in the app.js but still same issue presides

abbasmashaddy72 commented 5 months ago

Livewire Entangle Error, that is what it shows up when using async searchable dropdown only just as in the first comment I provided

If you need, I will provide you mode details according to you your requirement