Nuxt app inside Iframe gives mismatching childNodes vs VNodes

Question

Good day,.

I have setup a nuxt dev server inside a docker container, and want to render it inside a iframe. that sits inside a vue app / Directus v9 module.

http://api.test.lan << directus app << exposed on nginx
http://devServer:3000 << nuxt dev server << inside docker network

i have setup a proxy inside directus on /devServer/iframe to proxy the traffic to the dev server running inside the docker network.

http://api.test.lan/devServer/iframe >> http://devServer:3000

this allowed me to load the devServer inside the iframe with src="/devServer/iframe"

but this gave me trouble as the nuxt app is running client side as well, and as a result was trying to resolve http://api.test.lan/_nuxt/* _loading etc that did not exist

so i setup a proxy within directus to proxy all _* requests to http://devServer:3000

this solved the problem that the client side could not get access..

now the page is loading it shows the content of the page for half a second and then gives a page not found,

chrome devtools complaining about mismatching childNodes vs VNodes,

now the strange thing is that the element its complaining about is not even in the app anymore, it was before. I can see before the iframe redirects to page not found that the iframe is loaded with the correct data, it seems the iframe is stuck somehow, cleaning browser cache does not seem to work. firefox and chrome having the same problem, the app runs fine if not inside the iframe..

there is no difference between running the nuxt app ssr: true || false

so im abit lost on why this is happening.. does anyone know how i can approach this problem.?

EDIT: the page is redirected to the nuxt error page, from which i can go back to the homepage, and then the page loads without a problem, js works, hot reload works.. every thing

also visiting http://api.test.lan/devServer/iframe, the page also loads like in the iframe but then it fails the same way redirecting to the error page

so i suppose this is still a proxy issue and prob missing something obvious, im using express-http-proxy i can visit any _nuxt/**/*.js file and also the _loading/sse and __webpack_hmr/client event-steams by using http://api.test.lan/devServer/iframe as base URL.

from devtools it seems it hes to do with hydration.

kind regards.

Answer 1

Wel after some more playing around i found a different solution.. for ppl that want to do this as well, its quite simple, in nuxt.config.js add the following:

build: {
    publicPath: '/pathToProxy/_nuxt/',
  },
router: {
    base: '/pathToProxy',  
  }, 

This will set your default router path so that every request will start with '/pathToProxy' and SSR requests with '/pathToProxy/_nuxt/'

then from express using express-http-proxy

router.use(
  "/pathToProxy*",proxy("InternalAdressNuxtDevServer", {
    proxyReqPathResolver: (req) => {
     return new Promise(resolve => {
        resolve(req.originalUrl);
      });
    },
  })
);

This will create a proper proxy to your nuxt app, and it will work like a charm..

Cheers!