在Fresh中引入@tailwindcss/typography插件出现路径错误如何修复？

问题原因 #

1. 你给@tailwindcss/typography设置的别名"typography"导致Deno无法解析插件内部的模块导入——插件自身代码会引用@tailwindcss/typography/xxx格式的路径，你的别名映射无法覆盖这些内部路径，从而触发相对导入错误。
2. deno.jsonc中tailwindcss/的路径配置多了一个多余的斜杠，可能干扰模块解析。

解决步骤 #

1. 修正deno.jsonc的导入映射 #

修改imports部分，移除无效别名、修正路径并清理无用配置：

"imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
    "preact": "https://esm.sh/preact@10.19.2",
    "preact/": "https://esm.sh/preact@10.19.2/",
    "@preact/signals": "https://esm.sh/@preact/signals@1.2.1",
    "@preact/signals-core": "https://esm.sh/@preact/signals-core@1.5.0",
    "tailwindcss": "npm:tailwindcss@3.3.5",
    "tailwindcss/": "npm:tailwindcss@3.3.5/",
    "tailwindcss/plugin": "npm:tailwindcss@3.3.5/plugin.js",
    "@tailwindcss/typography": "npm:@tailwindcss/typography",
    "daisyui": "npm:daisyui@4.4.19",
    "$std/": "https://deno.land/std@0.212.0/"
}

2. 修正tailwind.config.js的导入语句 #

直接使用原包名导入@tailwindcss/typography，替换别名导入：

import { type Config } from "tailwindcss";
import typography from "@tailwindcss/typography";
import daisyui from "daisyui";
export default {
  content: [
    "{routes,islands,components}/**/*.{ts,tsx}",
  ],
  plugins: [typography, daisyui],
  daisyui: {
    themes: ["light", "dark", "lemonade", "autumn", "aqua", "nord"],
    logs: false
  },
} satisfies Config

原理说明 #

@tailwindcss/typography内部依赖自身包名路径进行模块导入，使用原包名作为导入映射的键，才能让Deno正确匹配所有内部路径；而别名映射无法覆盖这些内部引用，因此会触发相对导入错误。

内容的提问来源于stack exchange，提问作者Ooker