I use Nuxt.js v3 for my website and PM2 server for my production. After I build Nuxt.js code with pnpm run build and start PM2 daemon with start ecosystem.config.cjs site works just fine.
But after some time, from two to four weeks, site disappear and instead all users see random Unicode characters like on the screenshot below. There are no errors build or runtime errors and HTTP answer is 200 for this Unicode chars.
This is how Unicode chars look like in the production build
The thing is, after project rebuild and PM2 restart site works just fine again for several weeks. Did anyone see that problem before or know how to fix this?
My list of dependencies:
"devDependencies": {
"@nuxt/devtools": "latest",
"@nuxtjs/eslint-config-typescript": "^12.1.0",
"@nuxtjs/eslint-module": "^4.1.0",
"@nuxtjs/i18n": "8.0.0-rc.5",
"@typescript-eslint/parser": "^6.14.0",
"@vite-pwa/nuxt": "^0.1.2",
"@zadigetvoltaire/nuxt-gtm": "^0.0.13",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.0.1",
"nuxt": "^3.8.2",
"nuxt-delay-hydration": "^1.3.3",
"nuxt-gtag": "^2.0.5",
"nuxt-schema-org": "3.2.3",
"typescript": "^5.3.3",
"vue": "^3.3.12",
"vue-router": "^4.2.5",
"vue-tsc": "^1.8.25"
},
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^40.2.0",
"@ckeditor/ckeditor5-build-classic": "^40.2.0",
"@ckeditor/ckeditor5-find-and-replace": "^40.2.0",
"@ckeditor/ckeditor5-font": "^40.2.0",
"@ckeditor/ckeditor5-highlight": "^40.2.0",
"@ckeditor/ckeditor5-horizontal-line": "^40.2.0",
"@ckeditor/ckeditor5-html-embed": "^40.2.0",
"@ckeditor/ckeditor5-page-break": "^40.2.0",
"@ckeditor/ckeditor5-remove-format": "^40.2.0",
"@ckeditor/ckeditor5-source-editing": "^40.2.0",
"@ckeditor/ckeditor5-special-characters": "^40.2.0",
"@ckeditor/ckeditor5-theme-lark": "^40.2.0",
"@ckeditor/ckeditor5-vue": "^5.1.0",
"@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
"@nuxt/image": "^1.1.0",
"@pinia/nuxt": "^0.5.1",
"@vuepic/vue-datepicker": "^7.4.1",
"boxicons": "^2.1.4",
"date-fns": "^3.2.0",
"filepond-plugin-file-validate-size": "^2.2.8",
"filepond-plugin-file-validate-type": "^1.2.8",
"filepond-plugin-image-preview": "^4.6.12",
"h3-compression": "^0.3.2",
"isomorphic-dompurify": "^1.12.0",
"js-sha512": "^0.8.0",
"medium-zoom": "^1.1.0",
"slugify": "^1.6.6",
"sweetalert2": "^11.10.1",
"vue-dompurify-html": "^4.1.4",
"vue-filepond": "^7.0.4",
"vue3-carousel-nuxt": "^1.1.0"
}
I tried to exclude some dependencies, thinking they are causing the issue, but it didn't help much. Site is still periodically transforms to this.
For those who also stuck with this trouble:
After some research and tests I did a conclusion that problem may be with h3-compression dependency on ^0.3.2 version (at least after it's removal everything if fine again).
Somehow it worked not well on a long distance. It also might conflict with Cloudflare or other server options set with DevOps.
Also make sure to keep your dependencies up to date when it's possible. Good luck coding!