Webpack Puppeteer Chromium Installation: Unable to launch browser

Viewed 447

I'm setting up a node server to render React JSX components into images.

The server uses express, and the React components render to HTML using ReactDOMServer. I'm also using TypeScript. I bundle the whole thing using webpack. My webpack config is:

const path = require('path')

module.exports = {
entry: './src/index.tsx',
devtool: 'inline-source-map',
module: {
   rules: [
       {
           test: /\.tsx?$/,
           use: 'ts-loader',
           exclude: /node-modules/,
       },
   ],
},
resolve: {
   extensions: ['.tsx', '.ts', '.js'],
},
output: {
   filename: 'bundle.js',
   path: path.resolve(__dirname, 'dist')
},
target: 'node'
};

The html will be rendered to an image using node-html-to-image (https://github.com/frinyvonnick/node-html-to-image)

The server starts without problems, but when a request hits the server and the html should be rendered I get an error in the console.

This is the code for the server that executes:

app.post('/', (req, res) => {
const element = <User name={req.body.name} login={req.body.login}/>
const html = ReactDOMServer.renderToStaticMarkup(element)
nodeHtmlToImage({
    output: './image.png',
    html: html
}).then(() => console.log("image created successfully!"))
})

and the error I get is: UnhandledPromiseRejectionWarning: Error: Unable to launch browser, error message: Could not find browser revision 737027. Run "npm install" or "yarn install" to download a browser binary.

I suspect that the problem has to do with the chromium installation coming with puppeteer not being bundled correctly by webpack but I'm not sure.

EDIT: setting an explicit executablePath works, but removes the portability of my bundle.js.

0 Answers
Related