Using esi includes in Nuxt 2 - vue.js

Question

My goal: Glue Nuxt 3 rendered code inside my old application that is written in Nuxt 2. The glue will be Varnish and using the <esi:includes
My problem:
I have .vue file
<template>
<div>
<esi:include src="/from/nuxt-3-app" method="GET" />
</div>
</template>
It does work for a few seconds and *poof, disappears!
The errors I got:
1. Mismatching childNodes vs. VNodes: NodeList(15) [text, meta, text, meta, link, link, link, link, link, text, div#__nuxt, script, script, script, text] (3) [VNode, VNode, VNode...
2. [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
3. [Vue warn]: Unknown custom element: .... <- resolved by adding `v-pre` in <esi:include ... v-pre />
Note: They appear in order ^
What I've done:
Use v-pre
ignoredElements? -> I'm trying to declare it like these:
nuxt.config.js
...
Vue: {
config: {
ignoredElements: ["esi:include"]
}
}
^ but doesn't seem to work
Wrapping <esi:include ... /> with <client-only> ... </client-only> ("nuxt": "^2.15.8")
^ Side effect, it doesn't display or render what's inside my <esi:include
What I'm about to try:
surrogate-control headers - Reference but seems not what I need since I already declared do_esi=true by default. Here's my VCL if you want to see it:
backend test {
.host = "host.docker.internal";
.port = "3101";
}
sub vcl_backend_response {
set beresp.ttl = 1s;
set beresp.do_esi = true;
}
sub vcl_recv {
unset req.http.cookie;
if (req.url ~ "^/from/nuxt-3-app") {
set req.backend_hint = test;
return (hash);
}
}
What I just want: Render what's inside the <esi:includes ... /> without nuxt removing it
UPDATE:
By running $ docker exec -ti varnish-1 varnishlog -g request -q "ReqUrl eq '/from/nuxt-3-app'", it outputs:
* << Request >> 32802
- Begin req 32801 rxreq
- Timestamp Start: 1675160337.497249 0.000000 0.000000
- Timestamp Req: 1675160337.497249 0.000000 0.000000
- VCL_use boot
- ReqStart 172.19.0.1 51890 a0
- ReqMethod GET
- ReqURL /core/journals/animal-conservation-forum/article/abs/reproductive-seasonality-in-the-female-scimitarhorned-oryx-oryx-dammah/D040F6E602CB05C1AF5637F78D131964
- ReqProtocol HTTP/1.1
- ReqHeader Host: localhost
- ReqHeader Connection: keep-alive
- ReqHeader sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
- ReqHeader sec-ch-ua-mobile: ?0
- ReqHeader sec-ch-ua-platform: "Windows"
- ReqHeader Upgrade-Insecure-Requests: 1
- ReqHeader User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
- ReqHeader Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
- ReqHeader Sec-Fetch-Site: same-origin
- ReqHeader Sec-Fetch-Mode: navigate
- ReqHeader Sec-Fetch-User: ?1
- ReqHeader Sec-Fetch-Dest: document
- ReqHeader Accept-Encoding: gzip, deflate, br
- ReqHeader Accept-Language: en,en-US;q=0.9
- ReqHeader Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
- ReqHeader X-Forwarded-For: 172.19.0.1
- VCL_call RECV
- ReqUnset Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
- ReqUnset Host: localhost
- ReqHeader host: localhost
- VCL_return hash
- ReqUnset Accept-Encoding: gzip, deflate, br
- ReqHeader Accept-Encoding: gzip
- VCL_call HASH
- VCL_return lookup
- VCL_call MISS
- VCL_return fetch
- Link bereq 32803 fetch
- Timestamp Fetch: 1675160342.181087 4.683837 4.683837
- RespProtocol HTTP/1.1
- RespStatus 200
- RespReason OK
- RespHeader X-XSS-Protection: 1; mode=block
- RespHeader X-Frame-Options: SAMEORIGIN
- RespHeader Strict-Transport-Security: max-age=15552000; includeSubDomains
- RespHeader X-Download-Options: noopen
- RespHeader X-Content-Type-Options: nosniff
- RespHeader X-DNS-Prefetch-Control: off
- RespHeader Referrer-Policy: no-referrer-when-downgrade
- RespHeader Set-Cookie: aca-session=Fe26.2**d52e49ae7b3ccdc36556aa7b4c20048874f846e82468af606077f7c4b71be6eb*4tmkdQPlCdtF-2VkBbRhZA*rbBfz1w3lOXBVZzjzKAQNgWwFGtwaIidurV_nphqr7q_5OBFzOF1xNZxCF4jH100QXsGCOKP6zIoptRAR78rsfQQ8ZADhKmT5nV3Vof27Bc**6c81e4ccddf057d0ebda53bb4
- RespHeader Set-Cookie: session=s%3ANj4GDJ0TCKHeZ-xW6EMtPyQVkLS5NUNj.0k1Rej%2B8hMWdaaqM81CPLlt4gltmwKCJw8e%2BLKDuag0; Path=/; HttpOnly
- RespHeader Cache-Control: no-cache, no-store, must-revalidate
- RespHeader Expires: 0
- RespHeader Pragma: no-cache
- RespHeader Content-Type: text/html; charset=utf-8
- RespHeader Content-Length: 121908
- RespHeader ETag: W/"1dc34-cVsnSJj8RA0tTuog9jjKA9De5g8"
- RespHeader Date: Tue, 31 Jan 2023 10:19:02 GMT
- RespHeader X-Varnish: 32802
- RespHeader Age: 0
- RespHeader Via: 1.1 varnish (Varnish/6.3)
- VCL_call DELIVER
- VCL_return deliver
- Timestamp Process: 1675160342.181402 4.684152 0.000314
- Filters esi
- RespHeader Accept-Ranges: bytes
- RespUnset Content-Length: 121908
- RespHeader Connection: keep-alive
- RespHeader Transfer-Encoding: chunked
- Link req 32804 esi
- Timestamp Resp: 1675160350.339610 12.842360 8.158208
- ReqAcct 1686 0 1686 1111 403318 404429
- End
** << BeReq >> 32803
-- Begin bereq 32802 fetch
-- VCL_use boot
-- Timestamp Start: 1675160337.499660 0.000000 0.000000
-- BereqMethod GET
-- BereqURL /core/journals/animal-conservation-forum/article/abs/reproductive-seasonality-in-the-female-scimitarhorned-oryx-oryx-dammah/D040F6E602CB05C1AF5637F78D131964
-- BereqProtocol HTTP/1.1
-- BereqHeader sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
-- BereqHeader sec-ch-ua-mobile: ?0
-- BereqHeader sec-ch-ua-platform: "Windows"
-- BereqHeader Upgrade-Insecure-Requests: 1
-- BereqHeader User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
-- BereqHeader Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
-- BereqHeader Sec-Fetch-Site: same-origin
-- BereqHeader Sec-Fetch-Mode: navigate
-- BereqHeader Sec-Fetch-User: ?1
-- BereqHeader Sec-Fetch-Dest: document
-- BereqHeader Accept-Language: en,en-US;q=0.9
-- BereqHeader X-Forwarded-For: 172.19.0.1
-- BereqHeader host: localhost
-- BereqHeader Accept-Encoding: gzip
-- BereqHeader X-Varnish: 32803
-- VCL_call BACKEND_FETCH
-- VCL_return fetch
-- BackendOpen 26 core 192.168.65.2 3000 172.19.0.2 52386
-- Timestamp Bereq: 1675160337.513789 0.014128 0.014128
-- Timestamp Beresp: 1675160342.138510 4.638849 4.624720
-- BerespProtocol HTTP/1.1
-- BerespStatus 200
-- BerespReason OK
-- BerespHeader X-XSS-Protection: 1; mode=block
-- BerespHeader X-Frame-Options: SAMEORIGIN
-- BerespHeader Strict-Transport-Security: max-age=15552000; includeSubDomains
-- BerespHeader X-Download-Options: noopen
-- BerespHeader X-Content-Type-Options: nosniff
-- BerespHeader X-DNS-Prefetch-Control: off
-- BerespHeader Referrer-Policy: no-referrer-when-downgrade
-- BerespHeader Set-Cookie: aca-session=Fe26.2**d52e49ae7b3ccdc36556aa7b4c20048874f846e82468af606077f7c4b71be6eb*4tmkdQPlCdtF-2VkBbRhZA*rbBfz1w3lOXBVZzjzKAQNgWwFGtwaIidurV_nphqr7q_5OBFzOF1xNZxCF4jH100QXsGCOKP6zIoptRAR78rsfQQ8ZADhKmT5nV3Vof27Bc**6c81e4ccddf057d0ebda53bb4
-- BerespHeader Set-Cookie: session=s%3ANj4GDJ0TCKHeZ-xW6EMtPyQVkLS5NUNj.0k1Rej%2B8hMWdaaqM81CPLlt4gltmwKCJw8e%2BLKDuag0; Path=/; HttpOnly
-- BerespHeader Cache-Control: no-cache, no-store, must-revalidate
-- BerespHeader Expires: 0
-- BerespHeader Pragma: no-cache
-- BerespHeader Content-Type: text/html; charset=utf-8
-- BerespHeader Content-Length: 121908
-- BerespHeader ETag: W/"1dc34-cVsnSJj8RA0tTuog9jjKA9De5g8"
-- BerespHeader Date: Tue, 31 Jan 2023 10:19:02 GMT
-- BerespHeader Connection: keep-alive
-- BerespHeader Keep-Alive: timeout=5
-- TTL RFC 120 10 0 1675160342 1675160342 1675160342 0 0 cacheable
-- VCL_call BACKEND_RESPONSE
-- TTL VCL 1 10 0 1675160342 cacheable
-- TTL VCL 120 10 0 1675160342 cacheable
-- TTL VCL 120 10 0 1675160342 uncacheable
-- VCL_return deliver
-- Filters esi
-- Storage malloc Transient
-- Fetch_Body 3 length -
-- BackendReuse 26 core
-- Timestamp BerespBody: 1675160342.181075 4.681414 0.042565
-- Length 121908
-- BereqAcct 865 0 865 1050 121908 122958
-- End
** << Request >> 32804
-- Begin req 32802 esi
-- Timestamp Start: 1675160342.182034 0.000000 0.000000
-- ReqURL /page-component/core/journals/journalName/article/articleName/D040F6E602CB05C1AF5637F78D131964?hasAccess=0&lang=en&contentLastUpdateDate=2018-06-09T21:06:21.084Z
-- ReqUnset Accept-Encoding: gzip, deflate, br
-- ReqStart 172.19.0.1 51890 a0
-- ReqMethod GET
-- ReqURL /page-component/core/journals/journalName/article/articleName/D040F6E602CB05C1AF5637F78D131964?hasAccess=0&lang=en&contentLastUpdateDate=2018-06-09T21:06:21.084Z
-- ReqProtocol HTTP/1.1
-- ReqHeader Host: localhost
-- ReqHeader Connection: keep-alive
-- ReqHeader sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
-- ReqHeader sec-ch-ua-mobile: ?0
-- ReqHeader sec-ch-ua-platform: "Windows"
-- ReqHeader Upgrade-Insecure-Requests: 1
-- ReqHeader User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
-- ReqHeader Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
-- ReqHeader Sec-Fetch-Site: same-origin
-- ReqHeader Sec-Fetch-Mode: navigate
-- ReqHeader Sec-Fetch-User: ?1
-- ReqHeader Sec-Fetch-Dest: document
-- ReqHeader Accept-Language: en,en-US;q=0.9
-- ReqHeader Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
-- ReqHeader X-Forwarded-For: 172.19.0.1
-- VCL_call RECV
-- ReqUnset Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
-- ReqURL /core/journals/journalName/article/articleName/D040F6E602CB05C1AF5637F78D131964?hasAccess=0&lang=en&contentLastUpdateDate=2018-06-09T21:06:21.084Z
-- VCL_return hash
-- VCL_call HASH
-- VCL_return lookup
-- VCL_call MISS
-- VCL_return fetch
-- Link bereq 32805 fetch
-- Timestamp Fetch: 1675160349.704156 7.522122 7.522122
-- RespProtocol HTTP/1.1
-- RespStatus 200
-- RespReason OK
-- RespHeader X-Powered-By: Express
-- RespHeader Cache-Control: max-age=1
-- RespHeader Content-Type: text/html; charset=utf-8
-- RespHeader Content-Length: 278058
-- RespHeader Date: Tue, 31 Jan 2023 10:19:09 GMT
-- RespHeader X-Varnish: 32804
-- RespHeader Age: 0
-- RespHeader Via: 1.1 varnish (Varnish/6.3)
-- VCL_call DELIVER
-- VCL_return deliver
-- Timestamp Process: 1675160349.704181 7.522147 0.000025
-- Filters esi
-- RespHeader Accept-Ranges: bytes
-- RespUnset Content-Length: 278058
-- Link req 32806 esi
-- Timestamp Resp: 1675160350.336350 8.154316 0.632169
-- ReqAcct 0 0 0 0 281569 281569
-- End
*** << BeReq >> 32805
--- Begin bereq 32804 fetch
--- VCL_use boot
--- Timestamp Start: 1675160342.182128 0.000000 0.000000
--- BereqMethod GET
--- BereqURL /core/journals/journalName/article/articleName/D040F6E602CB05C1AF5637F78D131964?hasAccess=0&lang=en&contentLastUpdateDate=2018-06-09T21:06:21.084Z
--- BereqProtocol HTTP/1.1
--- BereqHeader Host: localhost
--- BereqHeader sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
--- BereqHeader sec-ch-ua-mobile: ?0
--- BereqHeader sec-ch-ua-platform: "Windows"
--- BereqHeader Upgrade-Insecure-Requests: 1
--- BereqHeader User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
--- BereqHeader Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
--- BereqHeader Sec-Fetch-Site: same-origin
--- BereqHeader Sec-Fetch-Mode: navigate
--- BereqHeader Sec-Fetch-User: ?1
--- BereqHeader Sec-Fetch-Dest: document
--- BereqHeader Accept-Language: en,en-US;q=0.9
--- BereqHeader X-Forwarded-For: 172.19.0.1
--- BereqHeader Accept-Encoding: gzip
--- BereqHeader X-Varnish: 32805
--- VCL_call BACKEND_FETCH
--- VCL_return fetch
--- BackendOpen 27 page-component 192.168.65.2 3200 172.19.0.2 41506
--- Timestamp Bereq: 1675160342.185778 0.003650 0.003650
--- Timestamp Beresp: 1675160349.659051 7.476923 7.473272
--- BerespProtocol HTTP/1.1
--- BerespStatus 200
--- BerespReason OK
--- BerespHeader X-Powered-By: Express
--- BerespHeader Cache-Control: max-age=1
--- BerespHeader Content-Type: text/html; charset=utf-8
--- BerespHeader Accept-Ranges: none
--- BerespHeader Content-Length: 278058
--- BerespHeader Date: Tue, 31 Jan 2023 10:19:09 GMT
--- BerespHeader Connection: keep-alive
--- BerespHeader Keep-Alive: timeout=5
--- TTL RFC 1 10 0 1675160350 1675160350 1675160349 0 1 cacheable
--- VCL_call BACKEND_RESPONSE
--- TTL VCL 1 10 0 1675160350 cacheable
--- VCL_return deliver
--- Filters esi
--- Storage malloc s0
--- Fetch_Body 3 length -
--- ESI_xmlerror ERR after 252412 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror ERR after 252440 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror WARN after 252479 ESI 1.0 <esi:include> lacks final '/'
--- ESI_xmlerror ERR after 252552 ESI 1.0 </esi:include> illegal end-tag
--- ESI_xmlerror ERR after 252566 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror ERR after 252577 ESI 1.0 <esi:bogus> element
--- BackendReuse 27 page-component
--- Timestamp BerespBody: 1675160349.704133 7.522005 0.045082
--- Length 278058
--- BereqAcct 855 0 855 237 278058 278295
--- End
*** << Request >> 32806
--- Begin req 32804 esi
--- Timestamp Start: 1675160349.704397 0.000000 0.000000
--- ReqURL /from/nuxt-3-app
--- ReqStart 172.19.0.1 51890 a0
--- ReqMethod GET
--- ReqURL /from/nuxt-3-app
--- ReqProtocol HTTP/1.1
--- ReqHeader Host: localhost
--- ReqHeader Connection: keep-alive
--- ReqHeader sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
--- ReqHeader sec-ch-ua-mobile: ?0
--- ReqHeader sec-ch-ua-platform: "Windows"
--- ReqHeader Upgrade-Insecure-Requests: 1
--- ReqHeader User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
--- ReqHeader Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
--- ReqHeader Sec-Fetch-Site: same-origin
--- ReqHeader Sec-Fetch-Mode: navigate
--- ReqHeader Sec-Fetch-User: ?1
--- ReqHeader Sec-Fetch-Dest: document
--- ReqHeader Accept-Language: en,en-US;q=0.9
--- ReqHeader Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
--- ReqHeader X-Forwarded-For: 172.19.0.1
--- VCL_call RECV
--- ReqUnset Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
--- VCL_return hash
--- VCL_call HASH
--- VCL_return lookup
--- VCL_call MISS
--- VCL_return fetch
--- Link bereq 32807 fetch
--- Timestamp Fetch: 1675160350.335800 0.631402 0.631402
--- RespProtocol HTTP/1.1
--- RespStatus 200
--- RespReason OK
--- RespHeader Access-Control-Allow-Origin: *
--- RespHeader content-type: text/html;charset=UTF-8
--- RespHeader x-powered-by: Nuxt
--- RespHeader server-timing: -;dur=0;desc="Generate"
--- RespHeader date: Tue, 31 Jan 2023 10:19:10 GMT
--- RespHeader content-length: 3689
--- RespHeader X-Varnish: 32806
--- RespHeader Age: 0
--- RespHeader Via: 1.1 varnish (Varnish/6.3)
--- VCL_call DELIVER
--- VCL_return deliver
--- Timestamp Process: 1675160350.335845 0.631448 0.000045
--- Filters
--- RespHeader Accept-Ranges: bytes
--- Timestamp Resp: 1675160350.336108 0.631710 0.000262
--- ReqAcct 0 0 0 0 3689 3689
--- End
*4* << BeReq >> 32807
-4- Begin bereq 32806 fetch
-4- VCL_use boot
-4- Timestamp Start: 1675160349.704484 0.000000 0.000000
-4- BereqMethod GET
-4- BereqURL
-4- BereqProtocol HTTP/1.1
-4- BereqHeader Host: localhost
-4- BereqHeader sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
-4- BereqHeader sec-ch-ua-mobile: ?0
-4- BereqHeader sec-ch-ua-platform: "Windows"
-4- BereqHeader Upgrade-Insecure-Requests: 1
-4- BereqHeader User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
-4- BereqHeader Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
-4- BereqHeader Sec-Fetch-Site: same-origin
-4- BereqHeader Sec-Fetch-Mode: navigate
-4- BereqHeader Sec-Fetch-User: ?1
-4- BereqHeader Sec-Fetch-Dest: document
-4- BereqHeader Accept-Language: en,en-US;q=0.9
-4- BereqHeader X-Forwarded-For: 172.19.0.1
-4- BereqHeader Accept-Encoding: gzip
-4- BereqHeader X-Varnish: 32807
-4- VCL_call BACKEND_FETCH
-4- VCL_return fetch
-4- BackendOpen 26 test 192.168.65.2 3101 172.19.0.2 36466
-4- Timestamp Bereq: 1675160349.706376 0.001892 0.001892
-4- Timestamp Beresp: 1675160350.330727 0.626242 0.624350
-4- BerespProtocol HTTP/1.1
-4- BerespStatus 200
-4- BerespReason OK
-4- BerespHeader Access-Control-Allow-Origin: *
-4- BerespHeader content-type: text/html;charset=UTF-8
-4- BerespHeader x-powered-by: Nuxt
-4- BerespHeader server-timing: -;dur=0;desc="Generate"
-4- BerespHeader date: Tue, 31 Jan 2023 10:19:10 GMT
-4- BerespHeader connection: close
-4- BerespHeader content-length: 3689
-4- TTL RFC 120 10 0 1675160350 1675160350 1675160350 0 0 cacheable
-4- VCL_call BACKEND_RESPONSE
-4- TTL VCL 1 10 0 1675160350 cacheable
-4- VCL_return deliver
-4- Filters esi
-4- Storage malloc s0
-4- Fetch_Body 3 length -
-4- BackendClose 26 test
-4- Timestamp BerespBody: 1675160350.335742 0.631257 0.005014
-4- Length 3689
-4- BereqAcct 733 0 733 228 3689 3917
-4- End

Answer 1

While I'm not a fan of doing unconditional ESI parsing, and why I still stand by the ESI content negotiation I explained in the answer you're referring to, we must first figure out why ESI isn't getting parsed at all.
Please run the following command and attach the output to your original question:
sudo varnishlog -g request -q "ReqUrl eq '/'"
My assumption is that / is the URL of the page that contains the ESI tag. If this is not the case, please adjust the URL in the -q filter.
Based on the varnishlog output you'll probably provide, I'll try to provide the proper solution.
Update
Based on the logs in transaction 32805, there's something wrong with the output:
--- ESI_xmlerror ERR after 252412 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror ERR after 252440 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror WARN after 252479 ESI 1.0 <esi:include> lacks final '/'
--- ESI_xmlerror ERR after 252552 ESI 1.0 </esi:include> illegal end-tag
--- ESI_xmlerror ERR after 252566 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror ERR after 252577 ESI 1.0 <esi:bogus> element
There's some bogus ESI content in the response of /core/journals/journalName/article/articleName/D040F6E602CB05C1AF5637F78D131964?hasAccess=0&lang=en&contentLastUpdateDate=2018-06-09T21:06:21.084Z
However, I do find it strange that transaction 32805 is complaining about this, because this is a 3-level subrequest that is not even supposed to process ESI. It looks like you're doing nested ESI.
That might be the result of processing every response with an ESI filter. Not only does it consume more CPU, it may also encounter output that it doesn't understand. Hence the error.
The only page that is supposed to contain ESI tags is /core/journals/animal-conservation-forum/article/abs/reproductive-seasonality-in-the-female-scimitarhorned-oryx-oryx-dammah/D040F6E602CB05C1AF5637F78D131964
The easy way out
The easiest solution is to tell Varnish not to enforce strict XML/xHTML rules for parsing output.
You can do this by adding the following runtime parameter to varnishd:
-p feature=+esi_disable_xml_check
There's no guarantee that it will solve your problem, but it might help.
The better solution
A better solution is to avoid nested ESI parsing when it's not needed.
As explained in https://www.varnish-software.com/developers/tutorials/example-vcl-template/#14-esi-support, you can use Surrogate-Control and Surrogate-Capability headers to negotiate ESI parsing.
That way you have full control over what kind of content is parsed for ESI tags and what not.