Laravel with [email protected] css/js was not loaded because its MIME type

[guoxiangke]

Question

/css/app.css?id=63d00dfbd8cde5c569e7 was not loaded because its MIME type, “text/html”, is not “text/css”.

Works if upload public/css/ public/js file to vercel. But I want use Composer build in vercel

Here are my config files: Composer scripts:

        "vercel": [
          "@php -v",
          "npm -v",
          "npm install && npm run prod"
        ],

api/assets.php :

<?php
// File: api/assets.php
$queries = array();
parse_str($_SERVER['QUERY_STRING'], $queries);
$file = $queries['file'];

echo require __DIR__ . '/../' . $file;

vercel.json:

{
    "version": 2,
    "functions": {
        "api/assets.php": { "runtime": "[email protected]" },
        "api/index.php": { "runtime": "[email protected]" }
    },
    "routes": [
        {
            "src": "/(css|js)/(.*)",
            "dest": "/api/assets.php?file=public/$1/$2"
        },
        {
            "src": "/(.*)",
            "dest": "/api/index.php"
        }
    ],
...

related:

Composer scripts output not being saved #102

[robertdrakedennis]

I use the builds options but since it's technically deprecated I'm not sure how long it will technically last.

    "builds": [
        { "src": "/api/index.php", "use": "[email protected]" },
        { "src": "/public/**", "use": "@vercel/static" }
    ],
    "routes": [
        {
            "src": "/(css|js|vendor|assets|build)/(.*)",
            "dest": "public/$1/$2"
        },
        {
            "src": "/(.*)",
            "dest": "/api/index.php"
        }
    ],
    ```
    
    

Might help you in getting your setup to work

[robertdrakedennis]

You also might be able to use the static runtime to load the files instead of using the PHP runtime, which is probably way slower

[guoxiangke]

https://github.com/juicyfx/vercel-examples/pull/27/commits/1fcbe3ff98ae34830cfd779224433cca16bb4f93 will try this one later.

[guoxiangke]

Works:

{
    "version": 2,
    "functions": {
        "api/*.php": { "runtime": "[email protected]" }
    },
    "routes": [
        { 
            "src": "/(css|js)/(.*)$",
            "dest": "/api/assets.php?type=$1&file=$2"
        },
        {
            "src": "/(.*)",
            "dest": "/api/index.php"
        }
    ],

    "scripts": {
        "vercel": [
          "@php -v",
          "npm -v",
          "npm install && npm run dev"
        ],
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],

/**
 * Built assets aren't currently routeable via vercel-php
 * Manually route assets to be found
 * https://github.com/juicyfx/vercel-examples/commit/1fcbe3ff98ae34830cfd779224433cca16bb4f93
 */
if ($_GET['type'] === 'css') {
    header("Content-type: text/css; charset: UTF-8");
    echo require __DIR__ . '/../public/css/' . basename($_GET['file']);
} else if ($_GET['type'] === 'js') {
    header('Content-Type: application/javascript; charset: UTF-8');
    echo require __DIR__ . '/../public/js/' . basename($_GET['file']);
}

[guoxiangke]

How make the composer scripts only run for assets.php? (now twice, one for index.php and one for assets.php)

    "scripts": {
        "vercel": [
          "npm install && npm run prod"
        ],

[f3l1x]

Hi @guoxiangke. There is no way how to detect which composer script you want to run in single deployment.

[guoxiangke]

Finally I deploy latest Laravel v10.13.0 (PHP v8.2.4) successfully. https://laravel-vercel-zeta.vercel.app/login https://laravel-vercel-zeta.vercel.app/build/assets/app-c01a54f1.css CSP https://laravel-vercel-zeta.vercel.app/build/assets/app-ab9fb1ca.js https://github.com/guoxiangke/laravel-vercel build 22 times