I have a PHP+Vue project that I inherited from another programmer. I know the code should work because it's currently hosted on a server and running.
I downloaded the files to make some changes, and tried to run it locally (using Wampserver). However, when I try to access the site I get Uncaught SyntaxError: Unexpected token '<' (at app.js:1:1).
What I tried: Looking into app.js (and app.css for that matter) in DevTools shows an HTML file (seems to be from base.blade.php) instead of javascript code. I checked every app.js file I could find on the project's folder and found actual code. It seems like the wrong file is being served, but I don't know why or how to fix it. I don't have any experience with PHP.
Code:
app.js:
require('./bootstrap');
window.Vue = require('vue');
const files = require.context('./components', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
const app = new Vue({
el: '#app',
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
bootstrap.js:
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
base.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title')</title>
<link href="{{ env('APP_ENV') == 'development' ? mix('css/app.css') : asset('css/app.css') }}" rel="stylesheet" defer>
<script src="{{ env('APP_ENV') == 'development' ? mix('js/app.js') : asset('js/app.js') }}" defer></script>
{{-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> --}}
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,800,900" rel="stylesheet">
@stack('head')
@stack('style')
</head>
<body>
<div id="app">
@yield('main')
</div>
</body>
@stack('script')
</html>