version > v2.63.0, prismjs will cause in Remix v2 vite mode, tooltip can't show

[pointhalo]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Component

Tooltip

Semi Version

2.63.0

Current Behavior

• ❌ Remix v2 vite构建模式， @douyinfe/semi-ui@2.63.0
• ✅ Remix v2 vite构建模式， @douyinfe/semi-ui@2.62.1

影响组件

• Tooltip 无法正确弹出

在 v2.63.0后由于支持了 CodeHighlight，引入了 prismjs 依赖

"@douyinfe/semi-foundation@2.63.0":
  version "2.63.0"
  resolved "https://bnpm.byted.org/@douyinfe/semi-foundation/-/semi-foundation-2.63.0.tgz#2853d9b8299dfe974dd651cb626e3446510ab130"
  integrity sha512-34uwqa0mHhI3hgclV6Zf8QMLmRBGnfScgpjOCB9jmSg28ThGeh6WIwO4HC64e03Kr/Jves10n9cWZIwjnoWMRA==
  dependencies:
    "@douyinfe/semi-animation" "2.63.0"
    "@mdx-js/mdx" "^3.0.1"
    async-validator "^3.5.0"
    classnames "^2.2.6"
    date-fns "^2.29.3"
    date-fns-tz "^1.3.8"
+  prismjs "^1.29.0"
    remark-gfm "^4.0.0"

Expected Behavior

• 无报错，组件正常运行

Steps To Reproduce

No response

ReproducibleCode

No response

Environment

- OS:
- browser:

Anything else?

// vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      "date-fns-tz": path.resolve(
        __dirname,
        "node_modules/date-fns-tz/esm/index.js"
      ),
    },
  },
  ssr: {
    noExternal: [
      "@douyinfe/semi-ui",
      "@douyinfe/semi-foundation",
      "@douyinfe/semi-illustrations",
      "@douyinfe/semi-icons",
      "scroll-into-view-if-needed",
    ],
  },
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
});

[pointhalo]

[pointhalo]

Not sure whether this issue belongs to a problem of the same cause. https://github.com/PrismJS/prism/issues/3154

[pointhalo]

在 Remix 工程中看到的 chunk，入参都被换成了 prism2，但似乎没换完整

// node_modules/prismjs/components/prism-jsx.js
+(function(Prism2) {
+  var javascript = Prism2.util.clone(Prism2.languages.javascript);
  var space = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source;
  var braces = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source;
  var spread = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;
  function re(source, flags) {
    source = source.replace(/<S>/g, function() {
      return space;
    }).replace(/<BRACES>/g, function() {
      return braces;
    }).replace(/<SPREAD>/g, function() {
      return spread;
    });
    return RegExp(source, flags);
  }
  spread = re(spread).source;
  Prism2.languages.jsx = Prism2.languages.extend("markup", javascript);
  Prism2.languages.jsx.tag.pattern = re(
    /<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source
  );
  Prism2.languages.jsx.tag.inside["tag"].pattern = /^<\/?[^\s>\/]*/;
  Prism2.languages.jsx.tag.inside["attr-value"].pattern = /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/;
  Prism2.languages.jsx.tag.inside["tag"].inside["class-name"] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
  Prism2.languages.jsx.tag.inside["comment"] = javascript["comment"];
  Prism2.languages.insertBefore("inside", "attr-name", {
    "spread": {
      pattern: re(/<SPREAD>/.source),
      inside: Prism2.languages.jsx
    }
  }, Prism2.languages.jsx.tag);
  Prism2.languages.insertBefore("inside", "special-attr", {
    "script": {
      // Allow for two levels of nesting
      pattern: re(/=<BRACES>/.source),
      alias: "language-javascript",
      inside: {
        "script-punctuation": {
          pattern: /^=(?=\{)/,
          alias: "punctuation"
        },
        rest: Prism2.languages.jsx
      }
    }
  }, Prism2.languages.jsx.tag);
  var stringifyToken = function(token) {
    if (!token) {
      return "";
    }
    if (typeof token === "string") {
      return token;
    }
    if (typeof token.content === "string") {
      return token.content;
    }
    return token.content.map(stringifyToken).join("");
  };
  var walkTokens = function(tokens) {
    var openedTags = [];
    for (var i = 0; i < tokens.length; i++) {
      var token = tokens[i];
      var notTagNorBrace = false;
      if (typeof token !== "string") {
        if (token.type === "tag" && token.content[0] && token.content[0].type === "tag") {
          if (token.content[0].content[0].content === "</") {
            if (openedTags.length > 0 && openedTags[openedTags.length - 1].tagName === stringifyToken(token.content[0].content[1])) {
              openedTags.pop();
            }
          } else {
            if (token.content[token.content.length - 1].content === "/>") {
            } else {
              openedTags.push({
                tagName: stringifyToken(token.content[0].content[1]),
                openedBraces: 0
              });
            }
          }
        } else if (openedTags.length > 0 && token.type === "punctuation" && token.content === "{") {
          openedTags[openedTags.length - 1].openedBraces++;
        } else if (openedTags.length > 0 && openedTags[openedTags.length - 1].openedBraces > 0 && token.type === "punctuation" && token.content === "}") {
          openedTags[openedTags.length - 1].openedBraces--;
        } else {
          notTagNorBrace = true;
        }
      }
      if (notTagNorBrace || typeof token === "string") {
        if (openedTags.length > 0 && openedTags[openedTags.length - 1].openedBraces === 0) {
          var plainText = stringifyToken(token);
          if (i < tokens.length - 1 && (typeof tokens[i + 1] === "string" || tokens[i + 1].type === "plain-text")) {
            plainText += stringifyToken(tokens[i + 1]);
            tokens.splice(i + 1, 1);
          }
          if (i > 0 && (typeof tokens[i - 1] === "string" || tokens[i - 1].type === "plain-text")) {
            plainText = stringifyToken(tokens[i - 1]) + plainText;
            tokens.splice(i - 1, 1);
            i--;
          }
          tokens[i] = new Prism2.Token("plain-text", plainText, null, plainText);
        }
      }
      if (token.content && typeof token.content !== "string") {
        walkTokens(token.content);
      }
    }
  };
  Prism2.hooks.add("after-tokenize", function(env) {
    if (env.language !== "jsx" && env.language !== "tsx") {
      return;
    }
    walkTokens(env.tokens);
  });
+})(Prism);
//# sourceMappingURL=chunk-U3L47AU7.js.map

[purpose233]

我这里的 vite 环境也出现了同样的 Prism is not defined 报错。 请问这个 issue 目前有结论了吗，除了版本降级还有其他解决方案吗？