Remark-mermaid with Next.js

[celinehaddad]

Hey all,

I installed the remark-mermaid plugin to my Next app, but I am hitting this error:

./node_modules/isexe/index.js:1:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/npm-which/node_modules/which/which.js
./node_modules/npm-which/index.js
./node_modules/remark-mermaid/src/utils.js
./node_modules/remark-mermaid/src/index.js
./components/markdown/MarkdownRender.tsx
./pages/[...slug].tsx

https://nextjs.org/docs/messages/module-not-found

This is what I have set up for the remark-mermaid options:

  <ReactMarkdown
        remarkPlugins={[
          remarkTab,
          [remarkChangeImagePath, props.imageBasePath, props.pageUrl],
          remarkCleanLinkUrl,
          remarkGfm,
          remarkBreaks,
          remarkDirective,
          remarkNote,
          remarkCollapsed,
          [
            remarkMermaid,
            {
              launchOptions: {
                executablePath: "path/to/chrome/executable",
              },
              errorFallback: "file",
            },
          ],
        ]}
        rehypePlugins={[rehypeSlug, anchorHeading, rehypeRaw]}
        remarkRehypeOptions={{
          handlers: {
            tablist: (h, node) => h(node, "tablist", node, all(h, node)),
            tab: (h, node) => h(node, "tab", node, all(h, node)),
          },
        }}
        components={components}
      >
        {props.markdown}
      </ReactMarkdown>

I have gathered that fs is a core Node module & provides access to the file system, so it can't be used in a browser environment. Any ideas for alternative approaches that can be used in a browser environment?

[remcohaszing]

remark-mermaid is no longer maintained. I recommend trying remark-mermaidjs instead.

[celinehaddad]

Thanks @remcohaszing 👍