Hey Team,
I’m getting this error in the deployed site only. It’s not reproducible in the dev environment.
For whatever reason, the _redirects file is 404 after deploy.
There’s more detail in my stack overflow post here:
I don’t know if Netlify would be responsible for this, but I’d be very grateful for any trouble shooting tips.
Hi there, glad you found us 
before we can help you, we need a little more information on the issues you are facing.
Please tell us:
I’ve isolated the error down to the file ‘_redirects’. removing it entirely stops the error. build now works fine in production, but this is not an ideal solution because I want those re-directs. So I’ve re-added the _redirects file and problem is back again.
I have no idea where to add a netlify.toml file with redirects info. I suspect it’s in the same public-now-but-dist-after-build directory that the _redirects folder goes into. But the problem persists when I user that file for redirects instead.
deployment is at: https://gallant-fermat-f884cb.netlify.com/
9:51:06 AM: Build ready to start
9:51:08 AM: build-image version: 9cade8af58c2cf3a17a1e9433d2e979149488837
9:51:08 AM: build-image tag: v3.3.5
9:51:08 AM: buildbot version: 2fd8f04962d5dbc77b79b9c2f5ab7a077e87376b
9:51:08 AM: Fetching cached dependencies
9:51:08 AM: Starting to download cache of 126.4MB
9:51:11 AM: Finished downloading cache in 3.22921831s
9:51:11 AM: Starting to extract cache
9:51:16 AM: Finished extracting cache in 4.732879386s
9:51:16 AM: Finished fetching cache in 8.040790235s
9:51:16 AM: Starting to prepare the repo for build
9:51:17 AM: Preparing Git Reference refs/heads/master
9:51:17 AM: Starting build script
9:51:17 AM: Installing dependencies
9:51:18 AM: Started restoring cached node version
9:51:20 AM: Finished restoring cached node version
9:51:22 AM: v10.19.0 is already installed.
9:51:23 AM: Now using node v10.19.0 (npm v6.13.4)
9:51:23 AM: Attempting ruby version 2.6.2, read from environment
9:51:24 AM: Using ruby version 2.6.2
9:51:25 AM: Using PHP version 5.6
9:51:25 AM: Started restoring cached node modules
9:51:25 AM: Finished restoring cached node modules
9:51:25 AM: Started restoring cached go cache
9:51:25 AM: Finished restoring cached go cache
9:51:25 AM: unset GOOS;
9:51:25 AM: unset GOARCH;
9:51:25 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
9:51:25 AM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
9:51:25 AM: go version >&2;
9:51:25 AM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
9:51:25 AM: go version go1.12 linux/amd64
9:51:25 AM: Installing missing commands
9:51:25 AM: Verify run directory
9:51:25 AM: Executing user command: npm run build
9:51:25 AM: > lite-bdfi-app@0.2.0 build /opt/build/repo
9:51:25 AM: > vue-cli-service build
9:51:26 AM: - Building for production...
9:51:54 AM: WARNING Compiled with 2 warnings11:51:54 PM
9:51:54 AM: warning
9:51:54 AM: asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
9:51:54 AM: This can impact web performance.
9:51:54 AM: Assets:
9:51:54 AM: js/chunk-vendors.cd225918.js (424 KiB)
9:51:54 AM: warning
9:51:54 AM: entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
9:51:54 AM: Entrypoints:
9:51:54 AM: app (461 KiB)
9:51:54 AM: js/chunk-vendors.cd225918.js
9:51:54 AM: css/app.8ecae013.css
9:51:54 AM: js/app.131b3c3a.js
9:51:54 AM: File Size Gzipped
9:51:54 AM: dist/js/chunk-vendors.cd225918.js 424.09 KiB 130.37 KiB
9:51:54 AM: dist/js/application~print-app.d962b2ae 159.31 KiB 18.22 KiB
9:51:54 AM: .js
9:51:54 AM: dist/js/application.2c4a5829.js 51.00 KiB 7.73 KiB
9:51:54 AM: dist/js/app.131b3c3a.js 35.71 KiB 10.34 KiB
9:51:54 AM: dist/js/preferences.b2e99efb.js 21.38 KiB 2.72 KiB
9:51:54 AM: dist/js/calculator.dbf8f963.js 20.34 KiB 3.25 KiB
9:51:54 AM: dist/js/apps.3d2bdb4a.js 7.64 KiB 2.20 KiB
9:51:54 AM: dist/js/about.42f621c8.js 3.18 KiB 1.37 KiB
9:51:54 AM: dist/precache-manifest.70e19b1a3da86b4 2.05 KiB 0.69 KiB
9:51:54 AM: d1b3e8a2ef3202a2c.js
9:51:54 AM: dist/precache-manifest.js 1.88 KiB 0.64 KiB
9:51:54 AM: dist/js/data-dump.7415f69c.js 1.84 KiB 0.85 KiB
9:51:54 AM: dist/js/tinkering.f8a48863.js 1.70 KiB 0.75 KiB
9:51:54 AM: dist/sw.js 1.17 KiB 0.63 KiB
9:51:54 AM: dist/js/print-app.b861aaa6.js 0.53 KiB 0.37 KiB
9:51:54 AM: dist/styles.css 23.40 KiB 5.56 KiB
9:51:54 AM: dist/css/app.8ecae013.css 0.82 KiB 0.33 KiB
9:51:54 AM: dist/css/application.e8fa0588.css 0.13 KiB 0.11 KiB
9:51:54 AM: dist/css/application~print-app.65bc027 0.11 KiB 0.09 KiB
9:51:54 AM: 0.css
9:51:54 AM: dist/css/apps.1c1e187d.css 0.06 KiB 0.08 KiB
9:51:54 AM: dist/css/print-app.fa530794.css 0.03 KiB 0.05 KiB
9:51:54 AM: Images and other types of assets omitted.
9:51:54 AM: DONE Build complete. The dist directory is ready to be deployed.
9:51:54 AM: INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
9:51:55 AM: Skipping functions preparation step: no functions directory set
9:51:55 AM: Caching artifacts
9:51:55 AM: Started saving node modules
9:51:55 AM: Finished saving node modules
9:51:55 AM: Started saving pip cache
9:51:55 AM: Finished saving pip cache
9:51:55 AM: Started saving emacs cask dependencies
9:51:55 AM: Finished saving emacs cask dependencies
9:51:55 AM: Started saving maven dependencies
9:51:55 AM: Finished saving maven dependencies
9:51:55 AM: Started saving boot dependencies
9:51:55 AM: Finished saving boot dependencies
9:51:55 AM: Started saving go dependencies
9:51:55 AM: Finished saving go dependencies
9:51:55 AM: Build script success
9:51:55 AM: Starting to deploy site from 'dist'
9:51:55 AM: Creating deploy tree
9:51:55 AM: Starting post processing
9:51:55 AM: 0 new files to upload
9:51:55 AM: 0 new functions to upload
9:51:56 AM: Post processing done
9:51:56 AM: Site is live
9:52:16 AM: Finished processing build request in 1m8.61730783s
In the build log, it appears to omit the _redirects file entirely. Not sure if there is a way to force this to be included somehow.
You will see the same error message if you visit the site. If you refresh with console open and watch the resources come in, the last pending request being:
https://lite.bdfi.app/_redirects?__WB_REVISION__=d38a2b58df330c85e0029eecf71d7c26
Always ending in 404…
I’m wondering if maybe the build script might have decided it doesn’t like the _redirects file?
This would mean the build script is not using the same build script that my local machine is using.
Here’s my package.json
{
"name": "lite-bdfi-app",
"version": "0.2.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"capacitor-copy": "vue-cli-service capacitor-copy",
"capacitor-init": "vue-cli-service capacitor-init",
"capacitor-open": "vue-cli-service capacitor-open",
"capacitor-update": "vue-cli-service capacitor-update",
"css:build": "postcss src/css/styles.css -o public/styles.css"
},
"dependencies": {
"@capacitor/cli": "^1.0.0-alpha.38",
"@capacitor/core": "^1.0.0-alpha.38",
"@fullhuman/postcss-purgecss": "^1.3.0",
"axios": "^0.19.1",
"core-js": "^3.4.4",
"moment": "^2.24.0",
"postcss": "^7.0.26",
"postcss-cli": "^6.1.3",
"register-service-worker": "^1.6.2",
"tailwindcss": "^1.1.4",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vue-uuid": "^1.1.1",
"vuex": "^3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.2.2",
"@vue/cli-plugin-eslint": "^4.2.2",
"@vue/cli-plugin-pwa": "^4.2.0",
"@vue/cli-plugin-router": "^4.2.2",
"@vue/cli-plugin-vuex": "^4.2.2",
"@vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-cli-plugin-pwa": "^1.0.0-alpha.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
It seems like the “@vue/cli-service”: “^4.1.0” is out of sync with the other dependencies. I’m going to test if updating that to the latest will have an effect.
Updating the “@vue/cli-service”: “^4.1.0”, to 4.2.2. inline with all the other official vue packages seemed to fix it.
But the error came back shortly after build again.
hey steamdiesel,
your _redirects file goes in the publish directory of your project.
I would suggest clearing your deploy cache - maybe some of the dependencies are not playing nice with each other?
Additionally, would you post your _redirects file here please, so we can take a look.
OK, time for some methodical trial an error, recorded here:
General environment info:
I’ve switched off auto-publishing for this session of troubleshooting. so using the preview link rather than the actual url.
The build script on deploy pushes files in the ‘public’ directory to the ‘dist’ directory.
Try:
created ‘_redirects’ file in public directory
/* /index.html 200
Adjusted manifest.json
//was:
"start_url": "./index.html",
//to:
"start_url": "./",
Pushed to Github master
In netlify deploy panel ran deploy with cleared cache.
Result:
No difference in error. The site runs fine otherwise, and ‘/invalid-url’ redirects are working to send to 404 page.
so it seems the ‘_redirects’ file is there and doing it’s thing.
PrecacheController.mjs:194 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://5e4638e7b84e804708e4d649--gallant-fermat-f884cb.netlify.com/_redirects?__WB_REVISION__=d38a2b58df330c85e0029eecf71d7c26","status":404}]
at l.o (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1749)
at async Promise.all (index 0)
at async l.install (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1221)
n @ WorkboxError.mjs:30
o @ PrecacheController.mjs:194
I have a hypothesis I want to test here:
I need the _redirects file in the published build directory, but I want to exclude it from the generated manifest that the service worker uses to filter trafffic to local or internet assets.
So I’m going to try to specify an exclusion for _redirects
Try:
Change my vue.config.js (a proxy for webpack.config in vue CLI projects) from this:
module.exports = {
devServer: {
host: 'lite.bdfi.test'
},
pwa: {
name: 'BDFI',
themeColor: '#2d3748',
msTileColor: '#2d3748',
appleMobileWebAppCapable: 'no',
appleMobileWebAppStatusBarStyle: 'default',
manifestPath: 'manifest.json',
workboxPluginMode: 'GenerateSW'
}
}
To this:
module.exports = {
devServer: {
host: 'lite.bdfi.test'
},
pwa: {
name: 'BDFI',
themeColor: '#2d3748',
msTileColor: '#2d3748',
appleMobileWebAppCapable: 'no',
appleMobileWebAppStatusBarStyle: 'default',
manifestPath: 'manifest.json',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'service-worker.js',
// ...other Workbox options...
exclude: [/_redirects/],
}
}
}
This means that I’m now specifying the input for the service worker, so I need to get a service worker from somewhere.
Here’s my service worker (it’s just a stripped-out version of the autogenerated one)
workbox.core.setCacheNameDetails({prefix: "lite-bdfi-app"});
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
After build it’s the same with the invected manifest and workbox scripts:
importScripts("/precache-manifest.54b556dfe16cf1359c2f3257fa76ade9.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
And also, the local ‘dist’ directory confirms that the ‘_redirects’ file is omitted.
Now I run this build in local and fire it up in the local server, now it’s throwing different errors. in local, which has never happened before…
PrecacheController.mjs:194 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"http://127.0.0.1:8887/css/app.159bf243.css.map?__WB_REVISION__=b04e3357da21d1241e39","status":404}]
at l.o (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1749)
at async Promise.all (index 0)
at async l.install (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1221)
n @ WorkboxError.mjs:30
o @ PrecacheController.mjs:194
Looks familiar, and there are now 5 of them, all looking for files with a .map extension…
Now I’ll remove .map files from the manifest build and see what that does:
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'service-worker.js',
// ...other Workbox options...
exclude: [/\.map$/, /_redirects/],
}
Run build again, check dist folder manifest, no .map files included in manifest.
Then check the local version of the app with cleared cache and local storage. no errors there… seems promising.
Push to GitHub. Netlify build triggers, not auto-published, so visit staging link.
No more errors on page load looking for _redirects file.
Check the redirect for ‘/invalid-url’ and it diverts to 404 page as intended.
Publishing the deploy, I can now install the app as a PWA on my desktop.
Issue resolved.
Thanks for your emotional support and friendship during this difficult time in my life.
@SteamDiesel!! Congrats on getting to a healthier place in your relationship with this very frustrating situation, and for doing a ton of work around sharing your approach and situation. Super glad it is working now!
@SteamDiesel , thank you for sharing your experience with this bug and your solution.
@perry , I think we still need to find the root cause. The suggested solution requires modifying files and working around bug somewhere in the build and/or deployment infrastructure. The problem occurred in my app as well recently. Also using latest vue.js in PWA mode, auto generated service worker.
Hey @ivelin, seems like the root cause is that “Precaching will, by default, only succeed if all the requests for all the URLs in the precache manifest return a HTTP 200”. Files like our netlify.toml or _redirects are never deployed, so they won’t return a 200. Workbox seems to break when processing them, unless they are explicitly excluded in the workboxOptions of the vue.config.js like @SteamDiesel described. Want to give that method a try and let us know if you continue to run into issues?
Hi @jen,
Valid points. Let me give that a try.
May this can turn into an FAQ for Vue.js users. It’s not immediately obvious for someone running on their own servers that pushing to netlify requires extra workbox parameters.
Regards,
Ivelin
Having a FAQ or a blog post to link to would be absolutely fantastic, Ivelin!
Seems like this workaround does the trick if you are ok with auto-generated service worker:
workboxPluginMode: 'GenerateSW',
workboxOptions: {
exclude: [/\.map$/, /_redirects/],
// ...other Workbox options...
}
oh fab! thanks for sharing!
Thanks for the workaround guys, saved my day. I was about to hardcode the service worker and throw all that vue-cli pwa goodness into the bin.
All good now, got the PWA pinned to the phone alread, merely 10 minutes after finding this thread 
I’d call that a win, @ttntm. Thanks for posting here and letting us know this topic was helpful. 
If you are using netlify.toml like me, this might work for you.
workboxPluginMode: 'GenerateSW',
workboxOptions: {
exclude: [/\.map$/, /netlify.toml/],
// ...other Workbox options...
}