web-infra-dev / rspress

🦀💨 A fast Rspack-based static site generator.
https://rspress.dev
MIT License
1.43k stars 132 forks source link

[Bug]: @rspress/plugin-shiki + rehype-raw causes an error #546

Open iicdii opened 9 months ago

iicdii commented 9 months ago

Version

System:
  OS: Windows 11 10.0.22621
  CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
  Memory: 18.18 GB / 31.15 GB
Browsers:
  Edge: Chromium (120.0.2210.133)
  Internet Explorer: 11.0.22621.1
npmPackages:
  rspress: ^1.9.3 => 1.9.3

Details

Installing this two plugins and run dev command causes an error.

> Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/parser/index.js' is not defined by "exports" in /workspaces/sandbox/node_modules/parse5/package.json

package version

"@rspress/plugin-shiki": "1.9.3",
"rehype-raw": "6.1.1"

rspress.config.ts

import * as path from "path";
import { defineConfig } from "rspress/config";
import rehypeRaw from "rehype-raw";

const mdxNodeTypes = /** @type {const} */ [
  "mdxFlowExpression",
  "mdxJsxFlowElement",
  "mdxJsxTextElement",
  "mdxTextExpression",
  "mdxjsEsm",
];

export default defineConfig({
  root: path.join(__dirname, "docs"),
  title: "Rspress",
  description: "Rspack-based Static Site Generator",
  icon: "/rspress-icon.png",
  logo: {
    light: "/rspress-light-logo.png",
    dark: "/rspress-dark-logo.png",
  },
  markdown: {
    mdxRs: false,
    rehypePlugins: [[rehypeRaw, { passThrough: mdxNodeTypes }]],
  },
  themeConfig: {
    socialLinks: [
      {
        icon: "github",
        mode: "link",
        content: "https://github.com/web-infra-dev/rspress",
      },
    ],
  },
});

Reproduce link

https://codesandbox.io/p/devbox/rspress-shiki-plugin-not-working-34vm26?file=%2Fpackage.json%3A19%2C1

Reproduce Steps

  1. npm run dev
  2. see the error
sumy7 commented 8 months ago

I have same error, but resolve it finally. You can try my config.

package.json

{
  "peerDependencies": {
    "parse5": "^6.0.1"
  },
  "devDependencies": {
    "rehype-katex": "^6.0.3",
    "rehype-raw": "^6.1.1",
    "remark-gemoji": "^8.0.0",
    "remark-math": "^5.1.1",
  }
}

rspress.config.ts

import rehypeKatex from 'rehype-katex'
import rehypeRaw from 'rehype-raw'

import remarkEmoji from 'remark-gemoji'
import remarkMath from 'remark-math'

// ...
{
  markdown: {
    // 使用 JS 版本的 MDX 编译器
    mdxRs: false,
    rehypePlugins: [
      rehypeKatex,
      [
        rehypeRaw,
        {
          passThrough: [
            'mdxFlowExpression',
            'mdxJsxFlowElement',
            'mdxJsxTextElement',
            'mdxTextExpression',
            'mdxjsEsm',
          ],
        },
      ],
    ],
    remarkPlugins: [remarkEmoji, remarkMath],
  },
}
// ...
iicdii commented 8 months ago

@sumy7 Have you installed @rspress/plugin-shiki?

sumy7 commented 8 months ago

@sumy7 Have you installed @rspress/plugin-shiki?

HI, @iicdii

I fork the Reproduce link, then add peerDependencies

{
  "peerDependencies": {
    "parse5": "^6.0.1"
  },
}

it worked as expect.

image
iicdii commented 8 months ago

@sumy7 It works, thank you! Btw, I applied the plugin and the line left and right padding on the code block disappeared.