laravel / vite-plugin

Laravel plugin for Vite.
MIT License
799 stars 151 forks source link

CORS policy blocks CSS and JS from vite server using Laragon #125

Closed mperezsc closed 2 years ago

mperezsc commented 2 years ago

Description:

Web application is shown without the assets that should come from Vite. I see unstyled and static HTML. Browser console output indicates that CORS policy is blocking them. I am aware that this, or similar issues have been arised before, but not using Laragon as server ecosystem. Some of the solutions presented have also been tried without success.

Interestingly, the error is not reproduced in another PC. Let me develop a bit this point. Application was developed in PC A. App was using Laravel mix and switched to Vite. Everything works fine in PC A. Then, app is installed (via composer and NPM installs) in PC B. Problem arises in PC B. As far as I know, PC A and PC B use the same configuration. Versions at the begining of the issue correspond to PC B

Steps To Reproduce:

From a working application, install App in another machine via composer and NPM.

I add some info that may be useful: vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        hmr: {
            host: 'localhost',
        },
    },
    plugins: [
        laravel([
            'resources/css/main.css',
            'resources/css/katex.min.css',
            'resources/js/app.js',
        ]),
    ],
});

composer.json:

"require": {
        "php": "^8.0",
        "akaunting/laravel-language": "^1.0",
        "cyrildewit/eloquent-viewable": "^6.0.2",
        "doctrine/dbal": "^2.12",
        "laravel/framework": "^9.23",
        "laravel/tinker": "^2.0",
        "laravel/ui": "^4.0",
        "livewire/livewire": "^2.8",
        "qcod/laravel-gamify": "^1.0",
        "spatie/laravel-collection-macros": "^7.9.3",
        "spatie/laravel-honeypot": "^4.1",
        "spatie/laravel-medialibrary": "^10.0"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.3",
        "spatie/laravel-ignition": "^1.0",
        "fzaninotto/faker": "^1.9.1",
        "mockery/mockery": "^1.3.1",
        "nunomaduro/collision": "^6.1",
        "phpunit/phpunit": "^9.3",
        "guzzlehttp/guzzle": "^7.0.1"
    },

package.json:

    "devDependencies": {
        "@tailwindcss/typography": "^0.5.2",
        "autoprefixer": "^10.4.4",
        "axios": "^0.25",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.5.1",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.20",
        "popper.js": "^1.12",
        "postcss": "^8.4.12",
        "tailwindcss": "^3.0.23",
        "vite": "^3.0.2"
    },
    "dependencies": {
        "alpinejs": "^3.7.1",
        "chart.js": "^3.7.0",
        "daisyui": "^2.24.0",
        "katex": "^0.16.0",
        "mathjs": "^10.6.4"
    }

Vite directive at :

@vite(['resources/css/main.css', 'resources/css/katex.min.css', 'resources/js/app.js'])

hot file content

http://localhost:5173

Thanks for the support

driesvints commented 2 years ago

Hi there,

Thanks for reporting but it looks like this is a question which can be asked on a support channel. Please only use this issue tracker for reporting bugs with the library itself. If you have a question on how to use functionality provided by this repo you can try one of the following channels:

However, this issue will not be locked and everyone is still free to discuss solutions to your problem!

Thanks.