Flutter Web on Apache - "Unexpected token '<'" Error Solution

This error usually occurs when Apache does not properly serve .js files or incorrectly redirects requests, causing the browser to receive an HTML file (often a 404 error page or index.html) instead of the expected JavaScript file. Follow these steps to resolve the issue.

1. Check if the File Exists on the Server

First, make sure the flutter_bootstrap.js file actually exists by running:

ls -l /var/www/html/flweb/flutter_bootstrap.js

If the file is missing, you may not have copied the build files correctly. After running flutter build web, move all contents from the build/web/ directory to /var/www/html/flweb/:

cp -r build/web/* /var/www/html/flweb/

Then, check again to ensure the files are present on the server.

2. Ensure Apache Serves the Correct MIME Types

Apache needs to correctly serve .js, .wasm, .json, and other required file types. Edit your Apache configuration file (/etc/httpd/conf/httpd.conf or /etc/httpd/conf.d/flweb.conf) and add the following lines:

<Directory "/var/www/html/flweb">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

# Required MIME types for Flutter Web
AddType application/wasm .wasm
AddType application/javascript .js
AddType application/json .json
AddType text/css .css
AddType application/octet-stream .blob

Then restart Apache:

sudo systemctl restart httpd

This ensures Apache serves the necessary file types properly.

3. Enable URL Rewriting for Flutter Web Routing Flutter Web relies on URL rewriting for proper navigation. If you're getting errors when refreshing the page, ensure that Apache redirects all requests to index.html. Create or edit /var/www/html/flweb/.htaccess:

nano /var/www/html/flweb/.htaccess

Add the following content and save the file:

RewriteEngine On
# Redirect all requests to index.html unless the file exists
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ /index.html [L]

Then restart Apache again:

sudo systemctl restart httpd

4. Check File Permissions and Ownership

sudo chown -R apache:apache /var/www/html/flweb
sudo chmod -R 755 /var/www/html/flweb

This allows Apache to read and serve the files correctly.

5. Check if the Browser is Receiving the Correct File

Sometimes, the browser may be loading an HTML error page instead of the expected JavaScript file. Test the response type using:

curl -I http://your-server-ip/flweb/flutter_bootstrap.js

You should see:

Content-Type: application/javascript

If it returns Content-Type: text/html, Apache is incorrectly serving the .js file. Double-check the MIME type settings in Step 2.

6. Clear Browser Cache and Reload

After restarting Apache, clear your browser cache to ensure it's not loading old files. In Google Chrome:

1. Open Developer Tools (F12 or Ctrl + Shift + I).
2. Go to the "Network" tab.
3. Enable "Disable cache".
4. Force reload the page with "Ctrl + Shift + R".

If you still get the same error, check the "Network" tab in Developer Tools to see which files are failing to load.

Conclusion Once you've completed these steps, try accessing http://your-server-ip/flweb/ and test if your Flutter Web app works correctly. If you’re still having issues:

• Check Apache logs:

  sudo tail -f /var/log/httpd/error_log

• Open the browser Developer Console (F12) and inspect any error messages.

If the issue persists, let me know which step you got stuck on, and we’ll troubleshoot it together!