Some questions about the @pererenderer/rollup-plugin

[yuanman0109]

My project is based on Vite packaging. Since my previous project was SPA, I ultimately hope that my project can be converted to SSG. Therefore, I started running npm install - save dev @ perenderer/rollup-plugin @ perenderer/renderer puppeteer puppeteer, and added import pre render from '@ perenderer/rollup-plugin in Vite. config. ts, with the following configuration:

rollupOptions: {
          plugins: [
            prerender({
              entryPath: 'index.html',
              renderer: '@prerenderer/renderer-puppeteer',
              rendererOptions: {
                  renderAfterDocumentEvent: 'custom-render-trigger',
                  headless: false
              },
              postProcess (renderedRoute) {
                // Replace all http with https urls and localhost to your site url
                renderedRoute.html = renderedRoute.html.replace(
                  /http:/ig,
                  'https:',
                ).replace(
                  /(https:\/\/)?(localhost|127\.0\.0\.1):\d*/ig,
                  (CDN_MAP[env] || ''),
                );
              },
            })
          ]
        }

But when I run vite build, the following error occurs:

Building [] 98% | Transforms: 4792/4792 | Chunks: 1/66 | Time: 15.5sPUPPETEER_DOWNLOAD_HOST is deprecated. Use PUPPETEER_DOWNLOAD_BASE_URL instead.
RollupError: index.html not found during prerender
    at error (file:///Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at Object.error (file:///Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:25351:20)
    at /Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/@[email protected]_7eidxhdof2pvopxq7j3qg5ehba/node_modules/@prerenderer/rollup-plugin/dist/RollupPrerenderPlugin.js:99:38
    at Layer.handle [as handle_request] (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/route.js:149:13)
    at Route.dispatch (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/route.js:119:3)
    at Layer.handle [as handle_request] (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/layer.js:95:5)
    at /Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:284:15
    at param (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:365:14)
    at param (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:376:14)
    at Function.process_params (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:421:3)
    at next (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:280:10)
    at expressInit (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/middleware/init.js:40:5)
    at Layer.handle [as handle_request] (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:328:13)
    at /Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:280:10)
    at query (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/middleware/query.js:45:5)
    at Layer.handle [as handle_request] (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:328:13)
    at /Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:280:10)
    at Function.handle (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/router/index.js:175:3)
    at Function.handle (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/application.js:181:10)
    at Server.app (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/express/lib/express.js:39:9)
    at Server.emit (node:events:527:35)
    at parserOnIncoming (node:_http_server:1143:12)
    at HTTPParser.parserOnHeadersComplete (node:_http_common:119:17)
Building [] 100% | Transforms: 4792/4792 | Chunks: 66/66 | Time: 60.1s

Build successful. Please see dist directory

error during build:
RollupError: Could not prerender: event 'custom-render-trigger' did not occur within 30s
    at error (file:///Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at Object.error (file:///Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:25351:20)
    at Object.<anonymous> (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/@[email protected]_7eidxhdof2pvopxq7j3qg5ehba/node_modules/@prerenderer/rollup-plugin/dist/RollupPrerenderPlugin.js:140:34)
    at Generator.throw (<anonymous>)
    at rejected (/Users/admin/yuanman_work/test_monorepo/ah5/increase/h5-web/node_modules/.pnpm/@[email protected]_7eidxhdof2pvopxq7j3qg5ehba/node_modules/@prerenderer/rollup-plugin/dist/RollupPrerenderPlugin.js:29:65)
 ELIFECYCLE  Command failed with exit code 1.

My index.html file is located in the project root directory, at the same level as vite.config.js. Why can't find it?
After changing the headless in rendererOptions to false, I found that Chrome returned 500 when accessing 127.0.0.1:8000. I don't know why running @ pererenderer/rollup plugin doesn't allow me to access my static resources. If I remove the plugin and run vite build again, there is an index.html file in my dist directory...
...
...
After a period of investigation, I finally pinpointed the issue to a plugin. If I were to introduce this plugin, the build would encounter errors. If I were to remove it, the build would proceed normally. I am not sure why this plugin has such problems, the plugin: '@vitejs/plugin-legacy': [email protected][email protected]

import legacy from '@vitejs/plugin-legacy"
// legacy({
//   targets: ['iOS >= 9, Android >= 4.4, last 2 versions, > 0.2%,ChromeAndroid >= 54,not dead'],
//   modernPolyfills: ['es.global-this', 'es.array.flat'], 
//   polyfills: ['es.array.flat'],
// })

[Tofandel]

The plugin is not built specifically for vite it on purpose only uses rollup hooks, from what I see the @vitejs/plugin-legacy is using the transformIndexHtml vite hook and seems to write multiple index.html in the output which might be what is causing an issue

I'll need to look into it but don't have any capacity to do so until November, maybe I can also use a custom transformIndexHtml hook in the case of vite to retrieve the content of the index.html file instead of looking on the filesystem.

[yuanman0109]

The plugin is not built specifically for vite it on purpose only uses rollup hooks, from what I see the @vitejs/plugin-legacy is using the transformIndexHtml vite hook and seems to write multiple index.html in the output which might be what is causing an issue

I'll need to look into it but don't have any capacity to do so until November, maybe I can also use a custom transformIndexHtml hook in the case of vite to retrieve the content of the index.html file instead of looking on the filesystem.

Looking forward to your solution. Thank you very much