Trying to convert MDX to pdf

[Nabeel Kahlil Maulana]

I have an .mdx file that I want to convert it into a .pdf file. The source file is an actual NextJs page (I don't insert any custom component, only layout wrapper).

My code:

import remarkGfm from 'remark-gfm'
import { remark } from 'remark'
import remarkMdx from 'remark-mdx'
import fs from 'fs';
import remarkpdf from 'remark-pdf';

function saveFile() {
  const aboutMdx = fs.readFileSync('pages/html.mdx', 'utf8')
  const processed = remark()
    .use(remarkMdx)
    .use(remarkGfm)
    .use(remarkpdf, { output: 'blob' })
    .processSync(aboutMdx);
  
  fs.writeFileSync(processed.result, resultPath);
}

saveFile()

Source file

// pages/html.mdx
import PageLayout from 'layout/PageLayout.tsx'
import styles from 'styles/About.module.css';

// MD content here
`
# Heading
Content here
## Heading 2
![img](srcpath.png)
`

export default ({ children }) => {
  return <PageLayout> 
    <div className={styles.AboutContainer}>
      {children}
    </div>
  </PageLayout>
} 

But what i got is

/home/me/projects/project/node_modules/remark-pdf/lib/index.js:342
pdfMake__namespace.vfs = pdfFonts__namespace.pdfMake.vfs;
                       ^

TypeError: Cannot add property vfs, object is not extensible
    at Object.<anonymous> (/home/nabeel/projects/personalweb/node_modules/remark-pdf/lib/index.js:342:24)
    at Module._compile (node:internal/modules/cjs/loader:1165:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
    at Module.load (node:internal/modules/cjs/loader:1043:32)
    at Function.Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadESM (node:internal/process/esm_loader:91:5)

Is there a way to fix this?

[inokawa]

Hi, could you try remark-pdf/node?

https://github.com/inokawa/remark-pdf#nodejs

[Nabeel Kahlil Maulana]

It seems importing remark-pdf/node is not working either:

Here is how I import it similar on the example:

import remarkGfm from 'remark-gfm'
import { remark } from 'remark'
import remarkMdx from 'remark-mdx'
import fs from 'fs';
import remarkpdf from 'remark-pdf/node';

And here is the result:

node:internal/errors:478
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/me/projects/project/node_modules/remark-pdf/node' imported from /home/me/projects/project/script/create-resume.mjs
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:330:11)
    at moduleResolve (node:internal/modules/esm/resolve:907:10)
    at defaultResolve (node:internal/modules/esm/resolve:1115:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

I'm using remark-pdf version 0.0.9

[inokawa]

@chawza
Sorry, I had removed remark-pdf/node entry point accidentally.
I reverted it so please use 0.0.12.