asked on January 3, 2023
Hello,
I am trying to get the sample code provided on this link: https://github.com/flexmonster/pivot-puppeteer/tree/flexmonster-from-nodemodules to work on AWS lambda environment. In order to do so I have made some notable changes such as the use of the following packages:
@sparticuz/chromium
puppeteer-core
# To install use following commands npm install --save puppeteer-core@$PUPPETEER_VERSION npm install --save-dev @sparticuz/chromium@$CHROMIUM_VERSION
The package @sparticuz/chromium replaces puppeteer as used in the sample code provided above in the link in order to reduce the file size as it bypasses the allowed upload limit on aws lambda otherwise (which supports up to 250 MB). The Node Modules are added as a layer to the lambda function. The index.js (equivalent of pivot.js) and index.html can be found in the attached files.
However while executing this file I get the following error in my console log:
"Flexmonster: CSS version mismatch.
Versions of Flexmonster specified in the CSS and JS files do not match.
The version of Javascript: 2.9.41, the version of CSS: .
To fix the issue, please try the following:
1. Clear your browser cache to make sure the latest files are loaded.
2. Check if the CSS file was updated correctly along with Flexmonster.
3. Ask the tech team for help (https://www.flexmonster.com/technical-support/).", source: pptr://__puppeteer_evaluation_script__ (1591)
I am also not getting any output in result. Any assistance in this matter would be highly appreciated. Looking forward towards your kind response.
⋅ January 4, 2023
Hello,
Thank you for reaching out to us and providing us with the details.
Our team supposes that the Flexmonster CSS file is not loaded. It causes the described issue in the console and not loading the export.
We recommend adding the following code to the index.js file like in our sample project (https://github.com/flexmonster/pivot-puppeteer/blob/5801f6f858159dc327c6c9f6fff0ba0a08ecbcaf/pivot.js#L136):
/* Reading font in base64 fromat and css file */
const woffFont = fs.readFileSync('node_modules/flexmonster/theme/assets/flexmonster-icons.woff', 'base64')
const cssStyle = fs.readFileSync('node_modules/flexmonster/flexmonster.min.css', 'utf-8'); // the css content goes here
/* Adding css style tag with CSS */
await page.addStyleTag({
content: cssStyle
});
/* Adding fonts to the page` */
await page.addStyleTag({
content: `
@font-face {
font-family: 'flexmonster-icons';
src: url(data:font/truetype;charset=utf-8;base64,${woffFont}) format('truetype');
font-weight: normal;
font-style: normal;
}
`
});
Kindly note that it is important to keep the order of connecting the libraries like in our sample project.
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ January 17, 2023
Hello,
Hope you are doing well.
We were wondering if our response helped you with your question.
Looking forward to hearing your feedback.
Kind regards,
Nadia
