Warning: Could not map element with type "tag"

We recently switched from npm to yarn to handle our install. Upon switching over, the Markdown components would not longer render and would display a warning:

Warning: Could not map element with type "tag"

I have tracked down that this occurs when checking the node types (node instanceof Element) MarkdownView.tsx#L48.

Removing this typecheck along with similar typechecks within this file resolves this issue. I believe this is being caused by a miss matched version of domhandler. domhandler is an undocumented dependency for react-showdown. It is also a dependency of htmlparser2 (a documented dependency for react-showdown.

It might well be more complicated than that because htmlparser2@4.1 (now on version 6) seems to rely on multiple versions of domhandler versions 3 (directly) and 4 (via domutils@2.0) .

[n1ru4l]

I created https://github.com/jerolimov/react-showdown/pull/65 😃

[n1ru4l]

npm why domhandler

shows the conflicting versions. The solution is to force only the installation of one of those, which is domhandler@4.0.0, trying to enforce domhandler@3.3.0 will result in some cannot read children of undefined error.

npm why domhandler
domhandler@3.3.0 dev
node_modules/domhandler
  domhandler@"^3.0.0" from htmlparser2@4.1.0
  node_modules/react-showdown/node_modules/htmlparser2
    htmlparser2@"^4.1.0" from react-showdown@2.1.0
    node_modules/react-showdown
      dev react-showdown@"2.1.0" from the root project
  domhandler@"^3.0.0" from htmlparser2@4.1.0
  node_modules/@types/sanitize-html/node_modules/htmlparser2
    htmlparser2@"^4.1.0" from @types/sanitize-html@1.27.1
    node_modules/@types/sanitize-html
      dev @types/sanitize-html@"1.27.1" from the root project

domhandler@4.0.0
node_modules/domutils/node_modules/domhandler
  domhandler@"^4.0.0" from domutils@2.5.0
  node_modules/domutils
    domutils@"^2.4.4" from htmlparser2@6.0.1
    node_modules/htmlparser2
      dev htmlparser2@"6.0.1" from the root project
      htmlparser2@"^6.0.0" from sanitize-html@2.3.2
      node_modules/sanitize-html
        sanitize-html@"2.3.2" from the root project
    domutils@"^2.0.0" from htmlparser2@4.1.0
    node_modules/react-showdown/node_modules/htmlparser2
      htmlparser2@"^4.1.0" from react-showdown@2.1.0
      node_modules/react-showdown
        dev react-showdown@"2.1.0" from the root project
    domutils@"^2.0.0" from htmlparser2@4.1.0
    node_modules/@types/sanitize-html/node_modules/htmlparser2
      htmlparser2@"^4.1.0" from @types/sanitize-html@1.27.1
      node_modules/@types/sanitize-html
        dev @types/sanitize-html@"1.27.1" from the root project
  domhandler@"^4.0.0" from dom-serializer@1.2.0
  node_modules/domutils/node_modules/dom-serializer
    dom-serializer@"^1.0.1" from domutils@2.5.0
    node_modules/domutils
      domutils@"^2.4.4" from htmlparser2@6.0.1
      node_modules/htmlparser2
        dev htmlparser2@"6.0.1" from the root project
        htmlparser2@"^6.0.0" from sanitize-html@2.3.2
        node_modules/sanitize-html
          sanitize-html@"2.3.2" from the root project
      domutils@"^2.0.0" from htmlparser2@4.1.0
      node_modules/react-showdown/node_modules/htmlparser2
        htmlparser2@"^4.1.0" from react-showdown@2.1.0
        node_modules/react-showdown
          dev react-showdown@"2.1.0" from the root project
      domutils@"^2.0.0" from htmlparser2@4.1.0
      node_modules/@types/sanitize-html/node_modules/htmlparser2
        htmlparser2@"^4.1.0" from @types/sanitize-html@1.27.1
        node_modules/@types/sanitize-html
          dev @types/sanitize-html@"1.27.1" from the root project

domhandler@4.0.0
node_modules/htmlparser2/node_modules/domhandler
  domhandler@"^4.0.0" from htmlparser2@6.0.1
  node_modules/htmlparser2
    dev htmlparser2@"6.0.1" from the root project
    htmlparser2@"^6.0.0" from sanitize-html@2.3.2
    node_modules/sanitize-html
      sanitize-html@"2.3.2" from the root project

You can enforce the version locally with yarn resolutions. Since I am using npm in my project together with vite as a bundler (I did not experience this issue with create-react-app/webpack), and there is no equivalent I had to use the resolve map in the vite.config.js:

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import macrosPlugin from "vite-plugin-babel-macros";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh(), macrosPlugin()],
  server: {
    port: 3001,
    proxy: {
      "/api": "http://localhost:3000",
      "/files": "http://localhost:3000",
    },
  },
  resolve: {
    alias: {
      domhandler: "node_modules/domutils/node_modules/domhandler/lib/index.js",
    },
  },
});