Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Module not found: ESM packages (@react-pdf/renderer) need to be imported #2992

Closed
sriechersrc opened this issue Dec 3, 2024 · 2 comments
Closed

Module not found: ESM packages (@react-pdf/renderer) need to be imported #2992

sriechersrc opened this issue Dec 3, 2024 · 2 comments

Comments

@sriechersrc
Copy link

Describe the bug

When trying to build a Next JS 15 app I get the following error:
Module not found: ESM packages (@react-pdf/renderer) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

These are the versions I am using:

{
  "next": "15.0.3",
  "react": "19.0.0-rc-69d4b800-20241021",
  "@react-pdf/renderer": "^4.1.5"
}

This is the code snippet that caused the error:

const PDFDownloadLink = dynamic(
  () => import('@react-pdf/renderer').then((mod) => mod.PDFDownloadLink),
  {
    ssr: false,
    loading: () => (
      <Skeleton className={cn(buttonVariants({ variant: 'default' }), 'bg-muted min-w-36')} />
    ),
  },
)

I managed to fix it by setting

const nextConfig = {
  experimental: {
    esmExternals: 'loose',
  },
}

Maybe swap out all Common JS imports with ESM if possible? That way we can get rid of the esmExternals option.

Desktop (please complete the following information):

  • OS: MacOS
  • Browser chrome
  • React-pdf version ^4.1.5
@PeterLaudel
Copy link

PeterLaudel commented Dec 4, 2024 •
edited
Loading

You need to do this:

pdfViewer.tsx

import { PDFViewer } from "@react-pdf/renderer";

export default PDFViewer;

something.tsx

const PDFViewer = dynamic(() => import("./pdfViewer"), {
  ssr: false,
});

Iam not sure what the right sentence is but you can only dynamicly import local files.

@DikoMahendraa
Copy link

DikoMahendraa commented Feb 1, 2025 •
edited
Loading 

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config: {
    resolve: { alias: { canvas: boolean; encoding: boolean } };
  }) => {
    // Handle PDF renderer
    config.resolve.alias.canvas = false;
    config.resolve.alias.encoding = false;

    return config;
  },
  transpilePackages: ["@react-pdf/renderer"],
};


export default nextConfig;

You can add it in your next.config.ts file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@diegomura @PeterLaudel @DikoMahendraa @sriechersrc