How to load local csv datasource while using puppeteer

Answered
Nofil asked on November 30, 2022

Following the guide shared here: https://github.com/flexmonster/pivot-puppeteer/blob/master/pivot.js
I want to make the following changes to pivot.js, 
setReport({
  dataSource: {
    filename: // add local object here from my device
  }
});
 
Currently while using the flexmonster CDN package (index.html is using the following include statements),
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
componentFolder: "https://cdn.flexmonster.com/"
 
The problem I face with this is that using the cdn packages I will have to host my data online. So I made the Following changes:
 
<script src="node_modules/flexmonster/flexmonster.js"></script>
componentFolder: "node_modules/flexmonster/"
 
I added local installation of flexmonster using node_modules and added my data source csv to this path "node_modules/flexmonster/". However, in this approach puppeteer was unable to detect my flexmonster package generating error upon creating New flexmonster object in index.html. 
To tackle this I added following code to pivot.js:
 
const browser = await puppeteer.launch({ headless: false }); /* Launching the headless browser */
const page = await browser.newPage(); /* Creating a new page */
page.setJavaScriptEnabled(true); // to enable javascript using puppeteer
var filepath = path.join(__dirname, "./node_modules/flexmonster/flexmonster.js");
await page.addScriptTag({ path: require.resolve(filepath) }); // to add script path
 
This change allowed my local flexmonster installation to be detected however generates the following error as shown in console screenshot attached in files.
Kindly guide me on how to resolve this issue of loading a local csv using puppeteer. Thanks for any help in advance!

Attachments:
flexerr.png
flexerr2.png

8 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster November 30, 2022

Hello,

Thank you for reaching out to us.

Kindly note that there's no need to host your data online. 
We suppose that the issue is caused by setting the absolute path of the file location. JavaScript has no access to the files from your file system due to security reasons. That's why the file path should contain localhost. This should work with both CDN and npm packages.
Also, we have a solution for using Puppeteer with Flexmonster from node modules. You are welcome to check it by the following link: https://github.com/flexmonster/pivot-puppeteer/tree/flexmonster-from-nodemodules

Please let us know if it works for you. Looking forward to hearing from you.

Kind regards,
Nadia

Public
Nofil December 1, 2022

Thank you for your reply, I have followed the steps mentioned and now running the node modules locally successfully. However, I am still facing a problem in loading my local csv (called data.csv) object which is present in current directory as well as "node_modules/flexmonster/" directory. Please refer to attached images to visualize the issue. Kindly assist me what method to use to load this file. Thank you.

Attachments:
flexerr3.png
flexerr4.png

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster December 1, 2022

Hello,

Thank you for the response.

Please note that this path still refers to the file in your file system, and JavaScript has no access to it. We recommend putting the data.csv file on a web server like http://localhost.

Please let us know if it works for you. Feel free to contact us if other questions arise.

Kind regards,
Nadia

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster December 7, 2022

Hello,

Hope you are doing well.

We were wondering if you had a chance to test the suggested approach.

Looking forward to hearing your feedback.

Kind regards,
Nadia

Public
Nofil December 12, 2022

Hello, thank you for your reply. I did try the suggested approach and I hosted my file on a web server and provided the link in filename, however, I was still facing the same issue as before and was unable to load the file. Could you help me understand why that is the case?

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster December 12, 2022

Hello,

Thank you for the response.

We suggest checking the Network tab of your browser's developer tools and checking where it is trying to get the file from. 
Could you please specify how exactly you specify the file path?

Looking forward to hearing from you.

Kind regards,
Nadia

Public
Nofil December 26, 2022

Hello,
Thank you for your response. I tried your suggestion and was able to solve the problem.
The issue was due to a CORS error with the following error message: ERR Access to XMLHttpRequest at 'url' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I was able to fix it by adding the following parameters to my puppeteer browser instance:

await puppeteer.launch({
    headless: true,
    devtools: true,
    args: [
        '--disable-web-security',
        '--disable-features=IsolateOrigins',
        '--disable-site-isolation-trials'
    ]
});
Public
Nadia Khodakivska Nadia Khodakivska Flexmonster December 27, 2022

Hello,

Thank you for the feedback.

We are glad to hear that it works for you,

As always, feel free to contact us in case further questions arise.

Kind regards,
Nadia

Please login or Register to Submit Answer