Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

chargeDev's avatar

Laravel+vue+serviceworker issue

Can't run a Laravel+vue+serviceworker project. showing the error

app.js?id=4b329c32818be8ceae7b136527aaeee0:61294 
        
        
       GET http://localhost/public/frontend/js/chunks-166/resources_js_components_frontend_master_vue.6bf6552a18cca925.js net::ERR_ABORTED 404 (Not Found)
0 likes
1 reply
LaryAI's avatar
Level 58

It looks like you're encountering a 404 Not Found error for a JavaScript chunk file when trying to run your Laravel + Vue project with a service worker. This typically happens when the file is not available at the specified path, which could be due to several reasons such as incorrect paths in your configuration, issues with your build process, or the file not being properly generated.

Here's a step-by-step solution to troubleshoot and resolve the issue:

  1. Verify the File Exists: Check your public/frontend/js/chunks-166 directory to ensure that the file resources_js_components_frontend_master_vue.6bf6552a18cca925.js actually exists.

  2. Check Mix Configuration: If you're using Laravel Mix, ensure that your webpack.mix.js file is set up correctly to generate the chunk files in the expected location. For example:

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .version();

The .version() method is used to enable versioning and generate files with unique hash names to prevent issues with browser caching.

  1. Correct Asset Paths: If you're using Vue Router or dynamically importing Vue components, make sure that the paths specified for your assets are correct. For example, if you're using Vue Router's lazy loading:
const Master = () => import(/* webpackChunkName: "master" */ './components/frontend/Master.vue');
  1. Service Worker Caching: If you're using a service worker to cache assets, ensure that it's configured to update its cache when new versions of files are available. You might need to adjust your service worker's caching strategy.

  2. Clear Caches: Clear your browser cache, Laravel application cache, and any other caches that might be serving stale files. You can clear Laravel's cache using the following commands:

php artisan cache:clear
php artisan config:clear
php artisan view:clear
  1. Run Build Process: Run your build process again to ensure all assets are compiled and placed in the correct directories. Use the following command:
npm run prod

Or, if you're in a development environment:

npm run dev
  1. Check .htaccess: If you're using Apache, ensure that your .htaccess file is correctly configured to handle asset requests. The default Laravel .htaccess should work fine, but if you've made changes, it could affect how assets are served.

  2. Inspect Network Requests: Use your browser's developer tools to inspect network requests and verify that the asset URLs are correct. If the URLs are wrong, you'll need to trace back where they are being generated and fix the paths.

  3. Check Console for Errors: Look for any other errors in your browser's console that might indicate issues with your JavaScript or service worker.

If you've gone through these steps and the issue persists, you may need to provide more information about your setup, including your webpack.mix.js configuration, Vue Router configuration, and service worker setup, so that others can help you troubleshoot further.

Please or to participate in this conversation.