Issue with html2canvas due to tailwindcss v4's oklch colors

[coycoylaniba]

calling toPdf() gives Error: Attempting to parse an unsupported color function "oklch" error

"react-to-pdf": "^1.0.1"
"tailwindcss": "^4.0.15"

[DanielAeon]

It is the library Html2canvas it doesn't support the new color format but html2canvas-pro does, could the library be updated to use this instead?

[DanielAeon]

Looks there is a pull request waiting to fix this issue: #148

[ivmarcos]

I want to keep an eye on html2canvas-pro change before fully switching, but in the meantime, a quicker solution would be using resolve.alias to point to the new package.

Something like (adjust to your bundler Webpack/Vite/CRA as needed):

resolve: {
  alias: {
    'html2canvas': 'html2canvas-pro'
  }
}

[DanielAeon]

Great point thank you =) and your right. Just trying it out and some things haved moved around a bit, so it must parse differently.

[troygoode]

Here is what I ended up doing to solve this in Next.js (15.5.4) based on ivmarcos' comment:

// next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  turbopack: {
    root: __dirname, // enables Turbopack for the `/src` directory
    resolveAlias: {
      html2canvas: "html2canvas-pro",
    },
  },
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      html2canvas: "html2canvas-pro",
    };
    return config;
  },
};

export default nextConfig;