cryptic css import error

[Maniktherana]

To Reproduce

1. in turborepo cd apps
2. init a fumadocs app with pnpm create fumadocs-app
3. run pnpm add fumadocs-twoslash

tsconfig.json:

{
  "extends": "@repo/tsconfig/nextjs.json",
  "compilerOptions": {
    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
    "baseUrl": ".",
    "incremental": true,
    "paths": {
      "@/*": ["./*"]
    },
    "plugins": [{ "name": "next" }]
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "next.config.mjs",
    "tailwind.config.ts"
  ],
  "exclude": ["node_modules", ".next"]
}

next.config.mjs:

import { createMDX } from "fumadocs-mdx/next";

const withMDX = createMDX();

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
  transpilePackages: ["@repo/ui"],
};

export default withMDX(config);

tailwind.config.ts:

import baseConfig from "@repo/ui/tailwind.config";
import { createPreset } from "fumadocs-ui/tailwind-plugin";
import type { Config } from "tailwindcss";

const webConfig = {
  ...baseConfig,
  presets: [
    createPreset({
      preset: "black",
    }),
  ],
  content: [
    ...baseConfig.content,
    "../../packages/ui/src/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./content/**/*.{md,mdx}",
    "./mdx-components.{ts,tsx}",
    "./node_modules/fumadocs-ui/dist/**/*.js",
  ],
} satisfies Config;

export default webConfig;

Current vs. Expected behavior

what I'm seeing:

TypeError: modifiers.DEFAULT is not a function

continued:

../../node_modules/.pnpm/fumadocs-twoslash@2.0.1_@types+react-dom@18.3.1_@types+react@18.3.4_fumadocs-ui@14.5.2_@types_ocxgvelh4pzbvyoit2l4ywgdye/node_modules/fumadocs-twoslash/dist/twoslash.css.webpack[javascript/auto]!=!../../node_modules/.pnpm/next@14.2.18_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.18_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!../../node_modules/.pnpm/fumadocs-twoslash@2.0.1_@types+react-dom@18.3.1_@types+react@18.3.4_fumadocs-ui@14.5.2_@types_ocxgvelh4pzbvyoit2l4ywgdye/node_modules/fumadocs-twoslash/dist/twoslash.css

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:05:14 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.16.0
  npm: 10.8.1
  Yarn: 1.22.19
  pnpm: 9.12.3
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 4.9.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

UI

Additional context

seems to be coming from here: https://github.com/fuma-nama/fumadocs/blob/f34e8956dad6017e0e6853dc23c130a564df95e3/packages/ui/src/theme/typography/index.ts#L175

I'm running this as an app in a turborepo environment

[Maniktherana]

Update, on trying to remove twoslash the underlying issue is that I can't import css at all. I get a similar error when trying to import global.css or my @repo/ui/globals.css

[fuma-nama]

Could you use mjs or mts for tailwind css config to ensure it's not due to ESM compatibility issues?

[fuma-nama]

just supported custom typography styles via theme.extends.typography in Tailwind CSS config, it should fix the issue if you were using it to customise styles

[Maniktherana]

Could you use mjs or mts for tailwind css config to ensure it's not due to ESM compatibility issues?

Sorry about the late reply but I ended up removing my @repo/ui components and that seemed to fix it. I'm still not sure what the root cause is

[fuma-nama]

Glad it's fixed, feel free to provide a reproduction anytime so I can investigate further into the issue. Currently I believe Typography issues are fixed with the latest release, would close this for now.