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
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
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 disablingEnableMMAP
and I finally fixed the issue!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.