Skip to content
This repository has been archived by the owner on Apr 9, 2023. It is now read-only.

Running webpack with PrerenderSpaPlugin does not find or process the HTML or JS from output folder. #424

Open
claudionunezjr opened this issue Jan 17, 2021 · 0 comments

Comments

@claudionunezjr
Copy link

claudionunezjr commented Jan 17, 2021

Issue Description

I've been trying to get this plugin working for several days now, but to no avail. What I've noticed is that my compiled JS isn't getting processed, which also means the generated HTML isn't either.

I'm compiling TS to JS along with the following plugins:

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            meta: {
                // Will generate: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                viewport: 'width=device-width, initial-scale=1'
            },
            title: 'nectar'
        }),
        new PrerenderSPAPlugin({
            indexPath: path.join(__dirname, 'dist', 'index.html'),
            outputDir: path.join(__dirname, 'ssg'),
            postProcess(renderedRoute) {
                // `postProcess` never gets called.
                console.log('html', renderedRoute.html);
                return renderedRoute;
            },
            renderer: new Renderer({
                renderAfterDocumentEvent: 'render-event'
            }),
            // Required - Routes to render.
            routes: ['/'],
            // Required - The path to the webpack-outputted app to prerender.
            staticDir: path.join(__dirname, 'dist')
        })
    ]

If I set the Puppeteer Renderer option renderAfterElementExists instead of renderAfterDocumentEvent, I will get the [prerender-spa-plugin] Unable to prerender all routes! output in the terminal.

Environment

OS: MacOS Catalina
IDE: VS Code
Node Version: v12.6.0
Webpack Version: 5.12.3
Webpack CLI: 4.3.1
Prerenderer Spa Plugin: 3.4.0
Framework: Nectar (basically vanilla JS - nothing magical)

Reproduce & Full Project Code/Setup

Project code: https://github.com/claudionunezjr/nectar
Clone: git clone https://github.com/claudionunezjr/nectar.git
Install the packages: npm i
Run the project: npm run prod

Result/Output:

$ npm run prod

> nectar@1.0.0 prod
> export NODE_ENV=production && webpack --progress

is prod true
98% emitting after emit PrerenderSPAPlugin

...and hangs because the JS code which calls the document event isn't processed.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant