search

unplugin / unplugin-vue-markdown

Compile Markdown to Vue component
MIT License
508 stars 27 forks source link

"Internal server error: Duplicate attribute" when there's headings in the markdown file #47

Closed feryardiant closed 5 months ago

feryardiant commented 5 months ago

Describe the bug

Just recently migrated from vite-plugin-md to this plugin, and got an issue that quite confusing to me, which is it's error when I have headings in the markdown file.

Say we have this markdown file

some text

## Suppose to be a heading 2

another long text

Here's the output when running pnpm dev

[vite] Internal server error: Duplicate attribute.
  Plugin: vite:vue
  File: /path/to/project/src/pages/about.md:5:91
  6  |  ---
  7  |  
  8  |  **CREASI.CO** merupakan sebuah perusahaan yang bergerak dalam bidang jasa perancangan dan pengembangan perangkat lunak. Mewujudkan kebutuhan layanan tata kelola digital dan berkontribusi pada pengembangan bisnis melalui teknologi informasi.
     |                                                                      ^
  9  |  
  10 |  Pada Mei 2022 CREASI.CO telah resmi terdaftar sebagai Perseroan Perorangan bernama PT. Creasi Tekno Solusi dengan Nomor Sertifikat Pendaftaran AHU-016542.AH.01.30.Tahun 2022 dan Nomor Izin Berusaha 1105220048685.
      at createCompilerError (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1329:17)
      at emitError (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2822:5)
      at Object.onattribnameend (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2307:7)
      at Tokenizer.handleAttrNameEnd (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:876:14)
      at Tokenizer.stateInAttrName (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:816:12)
      at Tokenizer.parse (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1067:16)
      at Object.baseParse (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2861:13)
      at Object.parse (/path/to/project/node_modules/.pnpm/@vue+compiler-dom@3.4.21/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:703:23)
      at Object.parse$2 [as parse] (/path/to/project/node_modules/.pnpm/@vue+compiler-sfc@3.4.21/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1851:24)
      at createDescriptor (file:///path/to/project/node_modules/.pnpm/@vitejs+plugin-vue@5.0.4_vite@5.2.8_vue@3.4.21/node_modules/@vitejs/plugin-vue/dist/index.mjs:74:43)
      at transformMain (file:///path/to/project/node_modules/.pnpm/@vitejs+plugin-vue@5.0.4_vite@5.2.8_vue@3.4.21/node_modules/@vitejs/plugin-vue/dist/index.mjs:2367:34)
      at TransformContext.transform (file:///path/to/project/node_modules/.pnpm/@vitejs+plugin-vue@5.0.4_vite@5.2.8_vue@3.4.21/node_modules/@vitejs/plugin-vue/dist/index.mjs:2910:16)
      at Object.transform (file:///path/to/project/node_modules/.pnpm/vite@5.2.8_@types+node@20.12.5/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:51172:62)
      at async loadAndTransform (file:///path/to/project/node_modules/.pnpm/vite@5.2.8_@types+node@20.12.5/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:53923:29)

and here the output when running pnpm build

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

SyntaxError: Duplicate attribute.
    at createCompilerError (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1325:17)
    at emitError (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2788:5)
    at Object.onattribnameend (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2303:7)
    at Tokenizer.handleAttrNameEnd (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:876:14)
    at Tokenizer.stateInAttrName (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:816:12)
    at Tokenizer.parse (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1067:16)
    at Object.baseParse (/path/to/project/node_modules/.pnpm/@vue+compiler-core@3.4.21/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2820:13)
    at Object.parse (/path/to/project/node_modules/.pnpm/@vue+compiler-dom@3.4.21/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:633:23)
    at Object.parse$2 [as parse] (/path/to/project/node_modules/.pnpm/@vue+compiler-sfc@3.4.21/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1851:24)
    at createDescriptor (file:///path/to/project/node_modules/.pnpm/@vitejs+plugin-vue@5.0.4_vite@5.2.8_vue@3.4.21/node_modules/@vitejs/plugin-vue/dist/index.mjs:74:43)
    at transformMain (file:///path/to/project/node_modules/.pnpm/@vitejs+plugin-vue@5.0.4_vite@5.2.8_vue@3.4.21/node_modules/@vitejs/plugin-vue/dist/index.mjs:2367:34)
    at Object.transform (file:///path/to/project/node_modules/.pnpm/@vitejs+plugin-vue@5.0.4_vite@5.2.8_vue@3.4.21/node_modules/@vitejs/plugin-vue/dist/index.mjs:2910:16)
    at file:///path/to/project/node_modules/.pnpm/rollup@4.14.0/node_modules/rollup/dist/es/shared/node-entry.js:19594:40 {
  id: '/path/to/project/src/pages/about.md',
  plugin: 'vite-plugin-pwa:build',
  name: 'RollupError',
  loc: {
    file: '/path/to/project/src/pages/about.md',
    line: 5,
    column: 91
  },
  hook: 'buildEnd',
  code: 'PLUGIN_ERROR',
  watchFiles: [
    '/path/to/project/index.html',
    '/path/to/project/src/main.ts',
    '/path/to/project/package.json',
    '/path/to/project/src/modules/i18n.ts',
    '/path/to/project/src/modules/gtm.ts',
    '/path/to/project/src/app.vue',
    '/path/to/project/node_modules/.pnpm/vite-ssg@0.23.6_vite@5.2.8_vue-router@4.3.0_vue@3.4.21/node_modules/vite-ssg/dist/index.mjs',
    '/path/to/project/src/style.css',
    '/path/to/project/src/modules/pwa.ts',
    '/path/to/project/src/pages/index.vue',
    '/path/to/project/src/pages/[...all].vue',
    '/path/to/project/src/pages/about.md'
  ],
  [Symbol(augmented)]: true
}

Reproduction

https://github.com/creasico/creasico.github.io

System Info

System:
  OS: macOS 14.4.1
  CPU: (8) arm64 Apple M1
  Memory: 186.94 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.10.0 - ~/.asdf/installs/nodejs/20.10.0/bin/node
  npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm
  pnpm: 8.10.0 - ~/.asdf/installs/nodejs/20.10.0/bin/pnpm
  bun: 1.1.0 - /opt/homebrew/bin/bun
Browsers:
  Chrome: 123.0.6312.107
  Safari: 17.4.1

Used Package Manager

pnpm

Validations

feryardiant commented 5 months ago

Recently I realized that the issue is actually on my markdown-it-anchor configuration that causing the issue. Previously, In one of my project my vite.config.ts is something like this

// vite.config.ts
import mdAnchor from 'markdown-it-anchor'

markdownItSetup(md) {
  md.use(mdAnchor, {
    permalink: mdAnchor.permalink.ariaHidden({
      renderAttrs: () => ({ 'aria-hidden': 'true' }),
      space: false,
      symbol: '🔗',
    }),
  })
}

Once I remove renderAttrs option and the issue is gone

// vite.config.ts
import mdAnchor from 'markdown-it-anchor'

markdownItSetup(md) {
  md.use(mdAnchor, {
    permalink: mdAnchor.permalink.ariaHidden({
      space: false,
      symbol: '🔗',
    }),
  })
}