Buffer is not defined, Platform React JS

[Hassaan0]

Steps to reproduce.

• run command npm i fluentreports
• then simply add following data in your file's componentDidMount if using Class Component or useEffect if using Functional Component

Sample Data

 const data = [
        { name: "Elijah", age: 18 },
        { name: "Abraham", age: 22 },
        { name: "Gavin", age: 28 },
      ];
      const rpt = new Report("grocery1.pdf")
        .data(data) // Add our Data
        .pageHeader(["My Grocery List"]) // Add a simple header
        .detail("{{count}} {{unit}} of {{item}}") // Put how we want to print out the data line.
        .render();

I already tried window.buffer and webpack handling given below

1. Adding plugins section with ProviderPlugin into webpack.config.js:
   module.exports = {
   // ...
   plugins: [
   // Work around for Buffer is undefined:
   // https://github.com/Buffer removed, it cause some trouble webpack/changelog-v5#10
   new webpack.ProvidePlugin({
   Buffer: ['buffer', 'Buffer'],
   }),
   new webpack.ProvidePlugin({
   process: 'process/browser',
   }),
   ]

2. Also add in resolve.fallback into webpack.config.js :
   resolve: {
   extensions: [ '.ts', '.js' ],
   fallback: {
   "stream": require.resolve("stream-browserify"),
   "buffer": require.resolve("buffer")
   }
   }

[NathanaelA]

Hi did you follow the instructions here https://github.com/NathanaelA/fluentreports/tree/master/generator

Specifically creating the browser version of the code base:
browserify fluentReportsBuilder.js -s fluentReports --ignore iconv-lite -o ../generator/fluentReportsBrowser.js

If you are doing server only, then Node provides "Buffer"

[Hassaan0]

Hi did you follow the instructions here https://github.com/NathanaelA/fluentreports/tree/master/generator

Specifically creating the browser version of the code base: browserify fluentReportsBuilder.js -s fluentReports --ignore iconv-lite -o ../generator/fluentReportsBrowser.js

If you are doing server only, then Node provides "Buffer"

Yeah I tried it again and it works..
but its showing me the GUI .. i want to use code base functionality but i cant figure it out how to use it .. could you please help me out

[NathanaelA]

The fluentReportsBrowser.js is the code based version of it for the browser.
The fluentReportsGenerator.js is used to have a report builder inside the browser.
The fluentReportsBuilder.js is used to run/generate any of the report builder reports.