在浏览器中呈现时，为Nuxt应用程序创建自定义Markdown-it插件会导致TypeError

Question

我正在创建一个Nuxt.js应用程序(使用npx和create-nuxt创建)来呈现markdown (使用markdown-it)。我为markdown-it创建了一个插件。插件在"helpers“目录中。

nuxt.config.js

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

我的插件是'../helpers/MarkdownNGH‘。我还添加了另一个用于测试的插件markdown-it-div。该插件是随npm一起安装的。

帮助器/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
 }
}

现在，当我运行npm run dev时，服务器端渲染工作正常，我的插件编辑标记渲染。

问题出现在浏览器端。在浏览器中加载页面会导致控制台中出现以下错误消息：

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)

在我生成的app.js中，有以下代码，因此它在编译中。

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

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

我复制了markdown- it -div的开发方式(https://github.com/kickscondor/markdown-it-div/blob/master/index.js)，它在服务器端渲染和浏览器中都工作得很好。我对webpack和其他人很陌生，所以这可能只是某种配置问题，等等。

编辑:我试过了：https://stackoverflow.com/a/56283408/216846所以把.babelrc改成了

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

但这并不管用。不确定我做得是否正确。

Answer 1

这是@nuxtjs/markdownit中的一个bug (或缺少的特性)。对此有一个公关：https://github.com/nuxt-community/modules/pull/323

当PR被合并(或者使用它构建markdownit )时，将插件代码更改为

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
 }
}