Building NextJS with pptx always fails when used on the server

[PrimotionStudio]

I get the following error

Import trace for requested module: node:https ./node_modules/pptxgenjs/dist/pptxgen.es.js ./src/lib/export-pptx.ts ./src/app/page.tsx

Import trace for requested module: node:fs ./node_modules/pptxgenjs/dist/pptxgen.es.js ./src/lib/export-pptx.ts ./src/app/page.tsx

Import trace for requested module: node:fs/promises ./node_modules/pptxgenjs/dist/pptxgen.es.js ./src/lib/export-pptx.ts ./src/app/page.tsx

Please whats the fix

I'm running Nextjs 15.3.2, and I ran the classic npm run build

[gitbrent]

What version of pptxgenjs are you using?

Version 4.0 has major improvements to integration.

[PrimotionStudio]

I'm sorry, I meant the build, "npm run build", always fails if I use pptxgenjs on the client

[PrimotionStudio]

I am using pptxgenjs, version 4.0.0

[PrimotionStudio]

I did mange to solve the issue, on my own, by converting the function into an API. I haven't tested if server actions would also work, but I think so

With that being said imma live this issue open for a few days, if there are anything I missed, or any follow up questions

[MonstraG]

We hit the same issue trying to update to 4.0.0 from latest 3.

NextJs (15.3.3) build fails with the following error:

> next build

   ▲ Next.js 15.3.3
   - Environments: .env.local, .env
   - Experiments (use with caution):
     · clientTraceMetadata

   Creating an optimized production build ...
Failed to compile.

node:fs/promises
Module build failed: UnhandledSchemeError: Reading from "node:fs/promises" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
    at node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:29:408376
    at Hook.eval [as callAsync] (eval at create (node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:14:9224), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:14:6378)
    at Object.processResource (node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:29:408301)
    at processResource (node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5308)
    at iteratePitchingLoaders (node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4667)
    at runLoaders (node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:8590)
    at NormalModule._doBuild (node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:29:408163)
    at NormalModule.build (node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:29:410176)
    at node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:29:82494

Import trace for requested module:
node:fs/promises
../node_modules/.pnpm/[email protected]/node_modules/pptxgenjs/dist/pptxgen.es.js
./Components/GeneratePptxButton.tsx
./app/page.tsx

(The error then repeats with node:https and node:fs)

I see if I can knock out a quick repro repo.

pptxgenjs 3.12.0 works nodejs 22.16.0

[MonstraG]

Yep, here you go: https://github.com/MonstraG/next-pptxgenjs-build-fail

1. clone
2. pnpm i
3. pnpm build

[surajchoudhury]

Encountered the same issue upgrading from v3 to v4, i'm using next.js 14 and the build fails with following errors:

node:fs/promises
Module build failed: UnhandledSchemeError: Reading from "node:fs/promises" is not handled by plugins (Unhandled scheme)

node:fs
Module build failed: UnhandledSchemeError: Reading from "node:fs" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.

node:https
Module build failed: UnhandledSchemeError: Reading from "node:https" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

is there a workaround to fix it i tried overriding webpack config but nothing works.

 webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      "node:fs": false,
      "node:fs/promises": false,
      "node:https": false,
    };
    return config;
  },

[surajchoudhury]

What version of pptxgenjs are you using?

Version 4.0 has major improvements to integration.

Thanks @gitbrent the issue is fixed with updating the webpack config.

   config.plugins.push(
      new NormalModuleReplacementPlugin(
        /^node:(fs|https|path|os|image-size|fs\/promises)$/,
        (resource) => {
          resource.request = resource.request.replace(/^node:/, "");
        }
      )
    );
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      https: false,
      "image-size": false,
      os: false,
      path: false,
      "fs/promises": false,
    };

[gitbrent]

Notes

• The "fs/promises" ref in package.json was removed in v4.0.1
• More information about handling "node:" directives when using webpack: pptxgenjs Integration docs

[focux]

FYI, for Next.js to work, you only need to pass this option to webpack on your next.config file:

const nextConfig = {
  webpack: (config, { webpack }) => {
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
        resource.request = resource.request.replace(/^node:/, "");
      })
    );

    return config;
  },
...
}