search

wireui / wireui

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

ERROR WIREUI LARAVEL 9 WITH VITE #571

Closed nazrul-dev closed 1 year ago

nazrul-dev commented 1 year ago

package.json "devDependencies": { "axios": "^1.1.2", "laravel-vite-plugin": "^0.7.0", "lodash": "^4.17.19", "postcss": "^8.4.6", "vite": "^3.0.0" }, "dependencies": { "@tailwindcss/forms": "^0.5.2", "alpinejs": "^3.10.5", "autoprefixer": "^10.4.13", "tailwindcss": "^3.2.4" }

composer.json "require": { "php": "^8.0.2", "darryldecode/cart": "^4.2", "guzzlehttp/guzzle": "^7.2", "laravel/breeze": "^1.15", "laravel/framework": "^9.19", "laravel/sanctum": "^3.0", "laravel/tinker": "^2.7", "livewire/livewire": "^2.10", "spatie/laravel-permission": "^5.7", "wireui/wireui": "^1.17.7" }, "require-dev": { "fakerphp/faker": "^1.9.1", "laravel/breeze": "^1.15", "laravel/pint": "^1.0", "laravel/sail": "^1.0.1", "mockery/mockery": "^1.4.4", "nunomaduro/collision": "^6.1", "phpunit/phpunit": "^9.5.10", "spatie/laravel-ignition": "^1.0" },

Layout

<!DOCTYPE html>

Mosaic HTML Demo - Home {{ config('app.name', 'Laravel') }} @vite(['resources/css/app.css']) @livewireStyles @wireUiScripts @vite(['resources/js/app.js'])
@include('partials.sidebar')
@include('partials.header')
{{ $slot }}
@stack('modals') @livewireScripts @stack('scripts')

THIS ERROR

Uncaught ReferenceError: wireui_notifications is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at evaluate (module.esm.js:434:31) at module.esm.js:2651:15 at Function. (module.esm.js:1174:55) at flushHandlers (module.esm.js:561:45) at stopDeferring (module.esm.js:566:5) at deferHandlingDirectives (module.esm.js:569:3) at initTree (module.esm.js:787:3) eval @ VM2546:3

module.esm.js:420 Uncaught ReferenceError: notifications is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at loop (module.esm.js:2730:3) at module.esm.js:2720:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2720:3)

module.esm.js:420 Uncaught ReferenceError: wireui_dialog is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:16) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at evaluate (module.esm.js:434:31) at module.esm.js:2651:15 at Function. (module.esm.js:1174:55) at flushHandlers (module.esm.js:561:45) at stopDeferring (module.esm.js:566:5) at deferHandlingDirectives (module.esm.js:569:3) at initTree (module.esm.js:787:3)

3module.esm.js:420 Uncaught ReferenceError: show is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2702:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2702:3) at flushHandlers (module.esm.js:561:45) eval @ VM2552:3 module.esm.js:420 Uncaught ReferenceError: style is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :4:35) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2632:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2632:3) at flushHandlers (module.esm.js:561:45)

module.esm.js:420 Uncaught ReferenceError: dialog is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2702:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2702:3) at flushHandlers (module.esm.js:561:45)

module.esm.js:420 Uncaught ReferenceError: dialog is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2702:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2702:3) at flushHandlers (module.esm.js:561:45)

module.esm.js:420 Uncaught ReferenceError: style is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:103) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2632:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2632:3) at flushHandlers (module.esm.js:561:45)

module.esm.js:420 Uncaught ReferenceError: style is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:60) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2632:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2632:3) at flushHandlers (module.esm.js:561:45)

module.esm.js:420 Uncaught ReferenceError: dialog is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2702:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2702:3) at flushHandlers (module.esm.js:561:45)

module.esm.js:420 Uncaught ReferenceError: style is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:45) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2632:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2632:3) at flushHandlers (module.esm.js:561:45)

2module.esm.js:420 Uncaught ReferenceError: style is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:50) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2632:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2632:3) at flushHandlers (module.esm.js:561:45)

module.esm.js:420 Uncaught ReferenceError: wireui_datetime_picker is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:16) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at evaluate (module.esm.js:434:31) at module.esm.js:2651:15 at Function. (module.esm.js:1174:55) at flushHandlers (module.esm.js:561:45) at stopDeferring (module.esm.js:566:5) at deferHandlingDirectives (module.esm.js:569:3) at initTree (module.esm.js:787:3)

module.esm.js:420 Uncaught ReferenceError: model is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2632:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2632:3) at flushHandlers (module.esm.js:561:45)

3module.esm.js:420 Uncaught ReferenceError: popover is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2702:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2702:3) at flushHandlers (module.esm.js:561:45)

module.esm.js:420 Uncaught ReferenceError: getSearchPlaceholder is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at module.esm.js:2632:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2632:3) at flushHandlers (module.esm.js:561:45)

module.esm.js:420 Uncaught ReferenceError: searchTime is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at el._x_forceModelUpdate (module.esm.js:2521:5) at module.esm.js:2532:8 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2529:3)

module.esm.js:420 Uncaught ReferenceError: filteredTimes is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:32) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at loop (module.esm.js:2730:3) at module.esm.js:2720:17 at reactiveEffect (module.esm.js:1618:16) at Object.effect2 [as effect] (module.esm.js:1593:5) at effect (module.esm.js:48:33) at wrappedEffect (module.esm.js:64:27) at Function. (module.esm.js:2720:3)

module.esm.js:420 Uncaught ReferenceError: wireui_modal is not defined at eval (eval at safeAsyncFunction (module.esm.js:471:14), :3:16) at module.esm.js:489:21 at tryCatch (module.esm.js:409:12) at evaluate (module.esm.js:434:31) at module.esm.js:2651:15 at Function. (module.esm.js:1174:55) at flushHandlers (module.esm.js:561:45) at stopDeferring (module.esm.js:566:5) at deferHandlingDirectives (module.esm.js:569:3) at initTree (module.esm.js:787:3) eval @ VM2642:3

..............

PLEASE HELPME

nickfls commented 1 year ago

@nazrul-dev out of curiosity - can you share your tailwind.config.js?

PH7-Jack commented 1 year ago

@nazrul-dev Try using the docs layout https://github.com/wireui/docs/blob/main/resources/views/layouts/clean.blade.php Using Vite or laravel mix is indifferent. The wireui has its own js files

thivalls commented 1 year ago

I've had the same problem today. I am trying to figure it out and I will return here

rohan-krishna commented 1 year ago

Pushing the @wireUiScripts inside the <head> helped. Please find below my snippet.

<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.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @wireUiScripts
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <!-- Styles -->
        @livewireStyles
    </head>

Hope this helps!

joaopalopes24 commented 1 year ago

@nazrul-dev Regarding Vite, it really gives a bug if you import Vite above WireUI. Try to follow the instruction here and it will solve your problem.

nazrul-dev commented 1 year ago

@nickfls this my tailwind.config

const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const plugin = require("tailwindcss/plugin"); /* @type {import('tailwindcss').Config} / module.exports = { mode: "jit",

content: [
    "./vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php",
    "./storage/framework/views/*.php",
    "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
    "./storage/framework/views/*.php",
    "./resources/views/**/*.blade.php",
    "./vendor/wireui/wireui/resources/**/*.blade.php",
    "./vendor/wireui/wireui/ts/**/*.ts",
    "./vendor/wireui/wireui/src/View/**/*.php",
],

presets: [require("./vendor/wireui/wireui/tailwind.config.js")],
theme: {
    extend: {
        boxShadow: {
            DEFAULT:
                "0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.02)",
            md: "0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02)",
            lg: "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.01)",
            xl: "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)",
        },
        colors: {
            gray: colors.slate,
            "light-blue": colors.sky,
            red: colors.rose,
            primary: colors.blue,
            secondary: colors.gray,
            positive: colors.emerald,
            negative: colors.red,
            warning: colors.amber,
            info: colors.blue
        },
        outline: {
            blue: "2px solid rgba(0, 112, 244, 0.5)",
        },
        fontFamily: {
            inter: ["Inter", "sans-serif"],
        },
        fontSize: {
            xs: ["0.75rem", { lineHeight: "1.5" }],
            sm: ["0.875rem", { lineHeight: "1.5715" }],
            base: ["1rem", { lineHeight: "1.5", letterSpacing: "-0.01em" }],
            lg: [
                "1.125rem",
                { lineHeight: "1.5", letterSpacing: "-0.01em" },
            ],
            xl: [
                "1.25rem",
                { lineHeight: "1.5", letterSpacing: "-0.01em" },
            ],
            "2xl": [
                "1.5rem",
                { lineHeight: "1.33", letterSpacing: "-0.01em" },
            ],
            "3xl": [
                "1.88rem",
                { lineHeight: "1.33", letterSpacing: "-0.01em" },
            ],
            "4xl": [
                "2.25rem",
                { lineHeight: "1.25", letterSpacing: "-0.02em" },
            ],
            "5xl": [
                "3rem",
                { lineHeight: "1.25", letterSpacing: "-0.02em" },
            ],
            "6xl": [
                "3.75rem",
                { lineHeight: "1.2", letterSpacing: "-0.02em" },
            ],
        },
        screens: {
            xs: "480px",
        },

        minWidth: {
            36: "9rem",
            44: "11rem",
            56: "14rem",
            60: "15rem",
            72: "18rem",
            80: "20rem",
        },
        maxWidth: {
            "8xl": "88rem",
            "9xl": "96rem",
        },
        zIndex: {
            60: "60",
        },
    },
},

plugins: [
    require("@tailwindcss/forms")({
        strategy: "class",
    }),
    plugin(({ addVariant, e }) => {
        addVariant("sidebar-expanded", ({ modifySelectors, separator }) => {
            modifySelectors(
                ({ className }) =>
                    `.sidebar-expanded .${e(
                        `sidebar-expanded${separator}${className}`
                    )}`
            );
        });
    }),
],

};

nazrul-dev commented 1 year ago 
    @livewireStyles

I have tried according to your instructions, and it is still the same as before, there is no change from the error, I hope you can provide more instructions to handle my case

joaopalopes24 commented 1 year ago

Try like this:

<!DOCTYPE html>
<html class="h-full bg-secondary-200" 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>

    {{-- Scripts and Styles --}}
    @livewireStyles()
    @wireUiScripts()
    @vite(['resources/css/app.css', 'resources/js/app.ts'])
</head>

<body class="h-full font-sans antialiased">
    <x-notifications />
    <x-dialog />

    {{ $slot }}

    @livewireScripts()
</body>

</html>