Issues with Next.js 14 (typescript, eslint)

[onexbash]

As you can see in the screenshot, I get an error when adding prefix & defaultFlavour to the tailwind config: Type error: This expression is not callable. Type 'typeof import("/opt/repos/projects/portfolio/node_modules/.pnpm/@[email protected][email protected]/node_modules/@catppuccin/tailwindcss/dist/index")' has no call signatures.

When removing the prefix & defaultFlavour, it works..

[joulev]

This is not related to Next.js. You can simply make a foo.js file with this content

// @ts-check
const foo = require("@catppuccin/tailwindcss");

foo({}); // TS error
foo.default({}); // TS is happy

to reproduce the error.

From a quick glance, the cause seems to be that @catppuccin/tailwindcss should've used export = instead of export default.

What you can do right now while waiting for this bug to be patched: use tailwind.config.ts instead where you can use ESM syntax

// tailwind.config.ts
import type { Config } from "tailwindcss";
import tailwindForms from "@tailwindcss/forms";
import catppuccin from "@catppuccin/tailwindcss";

const config: Config = {
  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,tsx}', '.css/**/*.css'],
  theme: {},
  safelist: [
    // this is for demonstration purposes only, not required for basic usage
    {
      pattern: /bg-.+/,
    },
  ],
  plugins: [
    tailwindForms,
    catppuccin({
      prefix: 'one',
      defaultFlavour: 'mocha',
    }),
  ],
};

export default config;