skip to Main Content

I’m working with Laravel 5.8 + Vue 2.5.17 running on docker (devilbox container) with apache 2.4 and php 7.3 and I have a weird issue that’s greatly slowing my development process.
Everytime I reload my laravel homepage where I added my custom vue component there is a 90% chance that I get a random javascript runtime error while the other 10% of times the page loads correctly and my component works great.

Here are some random errors I get everytime I reload clearing the cache (ctrl+f5)

SyntaxError: illegal character

SyntaxError: missing ) after argument list

SyntaxError: expected expression, got ‘}’

SyntaxError: unexpected token: ‘]’

SyntaxError: "" string literal contains an unescaped line break

If I look at the app.js source code from the browser it seems that when I get the error the file is corrupted
enter image description here

or some code is missing
enter image description here

Looking at the app.js file no my disk I clearly see that it is ok, something is wrong on the file streaming to the browser.
It could be a laravel cache problem or something related to apache but I have no idea where to look.

Any guess?

Here is my laravel .env file

APP_NAME=Laravel
APP_ENV=local
APP_KEY=*****
APP_DEBUG=false
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=*****
DB_USERNAME=*****
DB_PASSWORD=*****

BROADCAST_DRIVER=log
CACHE_DRIVER=array
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

My composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "ichtrojan/laravel-location": "dev-master",
        "igaster/laravel_cities": "^1.3",
        "laravel/framework": "5.8.*",
        "laravel/tinker": "^1.0",
        "league/oauth2-client": "^2.4",
        "spatie/laravel-permission": "^2.37",
        "srmklive/paypal": "~1.0"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.2",
        "beyondcode/laravel-dump-server": "^1.0",
        "filp/whoops": "^2.0",
        "fzaninotto/faker": "^1.4",
        "mockery/mockery": "^1.0",
        "nunomaduro/collision": "^3.0",
        "phpunit/phpunit": "^7.5"
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "autoload": {
        "psr-4": {
            "App\": "app/"
        },
        "classmap": [
            "database/seeds",
            "database/factories"
        ]
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "minimum-stability": "dev",
    "prefer-stable": true,
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-root-package-install": [
            "@php -r "file_exists('.env') || copy('.env.example', '.env');""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    }
}

And my package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.14",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17"
    },
    "dependencies": {
        "vue-moment": "^4.0.0",
        "vue-template-compiler": "^2.6.10"
    }
}

2

Answers


  1. Chosen as BEST ANSWER

    It turns out it was an error with apache.

    Checking the app.js with the browser I confirmed that everytime the file content was different due to corruption so I narrowed the possible issues to something related to the file downloading.

    First I tried downgrading apache from 2.4 to 2.2 and the error was fixed.

    Investigating further I looked for possible corruption errors on file downloaded from apache and I found this answer. I then tried to keep apache 2.4 while enabling the option EnableSendfile in the httpd.conf but it didnt work, I then tried disabling EnableMMAP and I finally fixed the issue!


  2. This kind of error come from javascript side,I think your Vue configuration is not correct or there is something missing, or there is a function that is not called in there right way.In general you better look in javascript code side.hope that would help.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search