Module not found: ESM packages (@github/markdown-toolbar-element) #2829
Description
Description
Hi I am trying to implement primer react in next.js and load a markdown file. Even though I did not call Markdown editor the app throws compilation error as below. I try to use MarkdownViewer
Next js version 13.1.6
Error: Module not found: ESM packages (@github/markdown-toolbar-element) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
Import trace for requested module:
./node_modules/@primer/react/lib-esm/drafts/MarkdownEditor/MarkdownEditor.js
./node_modules/@primer/react/lib-esm/drafts/MarkdownEditor/index.js
./node_modules/@primer/react/lib-esm/drafts/index.jsSteps to reproduce
Sample of code
'use client';
import React, { Component, useState, useEffect } from 'react';
import {MarkdownViewer} from '@primer/react/drafts'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkGfm from 'remark-gfm'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import '@github/markdown-toolbar-element'
import { text } from 'stream/consumers';
function md2html(md: any) {
return unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkRehype)
.use(rehypeStringify)
.process(md)
}
function MDPage () {
const fileName = require('src/md/echarts.md');
const [post, setPost] = useState('')
fetch(fileName)
.then(res => {
console.log("RES: ", JSON.stringify(res))
return res.text()
})
.then(text => {
let rawHTML = md2html(text)
rawHTML.then(html => {
setPost(`${html}`)
})
})
.catch(err => console.log(err));
return <div className='col-md-12'>
<div className='Box d-flex flex-column flex-shrink-0 mb-3'>
<div className='Box-header js-blob-header blob-header js-sticky js-position-sticky top-0 p-2 d-flex flex-shrink-0 flex-md-row flex-items-center p-3'>
<h4>Superset.md</h4>
</div>
<div className='Box-body readme blob js-code-block-container p-5 p-xl-6 gist-border-0 '>
<MarkdownViewer
dangerousRenderedHTML={{__html: post}}
markdownValue={post}
onChange={value => console.log(post) }
disabled={false}
/>
</div>
</div>
</div>;
}
export default MDPage;Version
v35.18.0
Browser
Chrome