Dynamic require of "markdown-it-anchor" is not supported

[osroca]

Describe the bug

I'm following the instructions in the README and I'm having troubles with this part to enable the auto-create anchors for the H tags.

   Markdown({
      markdownItOptions: {
        html: true,
        linkify: true,
        typographer: true
      },
      markdownItSetup(md) {
        // add anchor links to your H[x] tags
        md.use(require('markdown-it-anchor'))
      }
    }),

The output of the error is:

> vite build

vite v4.0.3 building for production...
✓ 17 modules transformed.
[vite-plugin-md] Problem encountered during the "parser" stage of the vite-plugin-md transform pipeline:

  Dynamic require of "file:///project-vite/node_modules/markdown-it-anchor/dist/markdownItAnchor.js" is not supported

Error: Dynamic require of "file:///project-vite/node_modules/markdown-it-anchor/dist/markdownItAnchor.js" is not supported
    at file:///project-vite/vite.config.js.timestamp-1676580000016.mjs:6:9
    at Object.markdownItSetup (file:///project-vite/vite.config.js.timestamp-1676580000016.mjs:59:16)
    at file:///project-vite/node_modules/vite-plugin-md/dist/index.js:18016:19
    at file:///project-vite/node_modules/vite-plugin-md/dist/index.js:17972:40
    at file:///project-vite/node_modules/vite-plugin-md/dist/index.js:17515:28
    at step (file:///project-vite/node_modules/vite-plugin-md/dist/index.js:17455:23)
    at Object.next (file:///project-vite/node_modules/vite-plugin-md/dist/index.js:17402:18)
    at file:///project-vite/node_modules/vite-plugin-md/dist/index.js:17388:71
    at new Promise (<anonymous>)
    at __awaiter (file:///project-vite/node_modules/vite-plugin-md/dist/index.js:17370:14)

do I need to install anything else?
Thanks!

Reproduction

private

System Info

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-5650U CPU @ 2.20GHz
    Memory: 325.17 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash

  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm

  Browsers:
    Chrome: 108.0.5359.124

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[osroca]

Moved to a discussion at #130

[osroca]

I've reopened it because I still have the same issue and I don't get an answer from the Discussion

[BFergerson]

I've also encountered this issue and would appreciate any help.

[DjilanoS]

I ran into the same problem, the issue here is that Vite with Typescript does not support a require.
What you need to do is:

npm i markdown-it-anchor

Then in vite.config.ts add the following:

import MarkdownItAnchor from 'markdown-it-anchor'

        Markdown({
            markdownItOptions: {
                //options here...
            },
            markdownItSetup(md) {
                // add anchor links to your H[x] tags
                md.use(MarkdownItAnchor)
            },
        }),

[osroca]

@DjilanoS thanks for the tip, I have it almost working.
Hopefully you can bring some more light on my issue.

I have a multiple page app, so I don't use vue router. I managed to configure Markdown link builder to useRouterLinks: false. This keeps my anchors as they have to be <a> instead of <router-link>.
Now the issue is that it is that MarkdownItAnchor is generating the anchorTag links (/^#/) as relative links, so I end having <a href="/#foo"> instead of <a href="#foo">.

Do you happen to know how to configure it or how to define my own permalink function to fix this issue?

I have looked at the code of https://github.com/yankeeinlondon/link-builder/blob/main/src/link.ts which is used by Markdown plugin to generate the links, and https://github.com/valeriangalliat/markdown-it-anchor/blob/master/permalink.js which finally generates the permalink in markdown-it-anchor with no luck so far.

Thanks again.