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.