I created laravel and react project, there is a production problen when I reach the app url (which is: "http://52.90.15.223/") I get: app.js:1 Uncaught SyntaxError: "Unexpected token '<'" The app.js file and the files from the "resources" directory do not seem to be loaded as should be on the browser
app.blade.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Funny Stack</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/memes-list.css') }}"
rel="stylesheet">
<link href="{{ asset('css/edit-meme.css') }}"
rel="stylesheet">
<link href="{{ asset('css/auth.css') }}"
rel="stylesheet">
<link href="{{ asset('css/navbar.css') }}"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Package json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production",
"heroku-postbuild": "npm run prod"
},
"devDependencies": {
"@babel/preset-react": "^7.13.13",
"@popperjs/core": "^2.10.2",
"axios": "^0.25",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"resolve-url-loader": "^5.0.0",
"sass": "^1.32.11",
"sass-loader": "^11.0.1"
},
"dependencies": {
"@babel/standalone": "^7.23.3",
"@react-oauth/google": "^0.11.1",
"interactjs": "^1.10.11",
"jwt-decode": "^4.0.0",
"materialize-css": "^1.0.0-rc.2",
"react-beforeunload": "^2.5.1",
"react-google-button": "^0.7.2",
"react-google-login": "^5.2.2",
"react-paginate": "^7.1.3",
"react-router-dom": "^5.2.0"
}
}
Ensure that there are no HTML tags in your JavaScript file. Sometimes, this error occurs if there's an opening '<' character in the JavaScript file, which the browser interprets as an HTML tag.
Solution: Check your JavaScript file for any HTML-like content and remove or escape it.
Ensure that you are including your JavaScript file correctly in your HTML file. If you are trying to include a PHP, HTML, or any non-JavaScript file as a script, you may encounter this error.
Solution: Double-check the tag in your HTML file and make sure it points to a valid JavaScript file.
If the browser cannot find or load your JavaScript file, it may interpret the 404 error page (which is an HTML page) as JavaScript, leading to this error.
Solution: Check the file path specified in your tag. Ensure that the file is in the correct location and the path is accurate.
If you are using a server-side language (like PHP) to generate your JavaScript file dynamically, ensure that there are no syntax errors or issues in the server-side code that might result in incorrect JavaScript output.
Solution: Check the server-side code generating the JavaScript file for any errors.
Use your browser's Developer Tools (usually accessed by pressing F12) to check the Network tab. Look for any failed requests or errors related to loading your JavaScript file.
Solution: Investigate and fix any issues reported in the Network tab.
If the issue persists, provide more details about your project structure, the content of your app.js file, and how you are including it in your HTML file. This information will help identify the specific cause of the error.