[Question] Uncaught (in promise) TypeError: Buffer.isBuffer is not a function

[mbeary-09]

Issue Category

• [ ] Enhancement
• [] Bug
• [ x] Question
• [ ] Documentation gap/issue

Product Versions

• Please specify what version of the library you are using......: [ ^3.12.0 ]
• Please specify what version(s) of PowerPoint you are targeting: [ 16.74 ]
• Please specify what web browser you are using.................: [ Chrome ]

Desired Behavior

I'm trying to writeFile, and it should result in a downloaded PPTX file from Chrome in my downloads folder.

Observed Behavior

I'm trying to writeFile, resulting in this error message: Uncaught (in promise) TypeError: Buffer.isBuffer is not a function. I'm unsure how to resolve this. Does anyone have any ideas?

Steps to Reproduce

I am creating a react typescript app.

My code

//Note - I call this function with a button click like this:
<button
        onClick={pptxMaker}
        className="rounded-md bg-white px-3 py-2  font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 
          hover:bg-gray-50"
      >
        Export to PPTX
      </button>

import pptxgen from "pptxgenjs";

export const pptxMaker = async () => {
  console.log("creating pptx");

  let pptx = new pptxgen();
  let slide = pptx.addSlide();

  slide.addText("React Demo!", {
    x: 1,
    y: 0.5,
    w: "80%",
    h: 1,
    fontSize: 36,
    align: "center",
    fill: { color: "D3E3F3" },
    color: "008899",
  });

  slide.addText("PpptxGenJS version:", {
    x: 0,
    y: 5.3,
    w: "100%",
    h: 0.33,
    align: "center",
    fill: { color: "E1E1E1" },
    color: "A1A1A1",
  });

  pptx.writeFile({ fileName: "pptxgenjs-demo-react.pptx" });
  return "success";
};

The error message:

Uncaught (in promise) TypeError: Buffer.isBuffer is not a function
    at Object.isBuffer (pptxgenjs.js?v=d251db6d:349:25)
    at a.getTypeOf (pptxgenjs.js?v=d251db6d:957:139)
    at n.s (pptxgenjs.js?v=d251db6d:356:26)
    at n.b (pptxgenjs.js?v=d251db6d:372:93)
    at n.folder (pptxgenjs.js?v=d251db6d:406:43)
    at PptxGenJS2.<anonymous> (pptxgenjs.js?v=d251db6d:7819:31)
    at step (pptxgenjs.js?v=d251db6d:2834:19)
    at Object.next (pptxgenjs.js?v=d251db6d:2781:14)
    at pptxgenjs.js?v=d251db6d:2767:67
    at new Promise (<anonymous>)
i

[mbeary-09]

Update - my react is outdated. I recreated my app, and it worked. This is what the package.json should be:

  "name": "pptxtester",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "pptxgenjs": "^3.12.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.9"
  }
}