Creating a custom Markdown-it plugin for Nuxt application results in TypeError when rendering in browser

Question

I am creating a Nuxt.js application (created with npx and create-nuxt) that renders markdown (using markdown-it). I created a plugin for markdown-it. The plugin is in "helpers" directory.

nuxt.config.js

...
modules: [
...,
  '@nuxtjs/markdownit',
 ]
],
...
markdownit: {
  preset: 'commonmark',
  injected: true,
  use: [
    '../helpers/MarkdownNGH',
    'markdown-it-div'
  ]
},

My plugin is the '../helpers/MarkdownNGH'. I have also added another plugin markdown-it-div for testing. That plugin is installed with npm.

helpers/MarkdownNGH

module.exports = function plugin (md) {
 md.rendered.rules.link_open = (tokens, idx, options, env, self) => {
  // Logic for replacing the links is not important for this question
 }
}

Now, when I run npm run dev the server-side rendering works as it should and my plugin edits the markdown rendering.

The problem arises in the browser side. Loading the page in browser results in following error message in console:

client.js?06a0:77
TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.eval (MarkdownNGH.js?7e65:3)
    at eval (MarkdownNGH.js:67)
    at Module../helpers/MarkdownNGH.js (app.js:322)
    at __webpack_require__ (runtime.js:791)
    at fn (runtime.js:151)
    at eval (markdown-it.js?e563:6)
    at _callee2$ (index.js?f26e:51)
    at tryCatch (runtime.js?96cf:45)
    at Generator.invoke [as _invoke] (runtime.js?96cf:271)
    at Generator.prototype.<computed> [as next] (runtime.js?96cf:97)

In my generated app.js there is following code so it is in the compilation.

/***/ "./helpers/MarkdownNGH.js":
/*!********************************!*\
  !*** ./helpers/MarkdownNGH.js ***!
  \********************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval(...) // The error points to this line

I copied the way markdown-it-div was developed ( https://github.com/kickscondor/markdown-it-div/blob/master/index.js ) and it works fine both in the server side rendering and in the browser. I am quite noob with webpack and stuff regarding it so this might be just some kind of configuration issue etc.

EDIT: I tried this: https://stackoverflow.com/a/56283408/216846 so changed .babelrc to

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ],
      "sourceType": "unambiguous"
    },
    "dev": {
      "sourceType": "unambiguous"
    }
  }
}

but it didn't help. Not sure if I did this correctly.

Answer 1

This is a bug (or missing feature) in @nuxtjs/markdownit. There is a PR for this: https://github.com/nuxt-community/modules/pull/323

When the PR is merged (or you build the markdownit with it) change the plugin code to

export default function plugin (md) {
 md.rendered.rules.link_open = (tokens, idx, options, env, self) => {
  // Logic for replacing the links is not important for this question
 }
}