Создание собственного плагина Markdown-it для приложения Nuxt приводит к TypeError при рендеринге в браузере - PullRequest
Новая
       22

Создание собственного плагина Markdown-it для приложения Nuxt приводит к TypeError при рендеринге в браузере

0 голосов
/ 10 января 2020

Я создаю приложение Nuxt. js (созданное с помощью npx и create-nuxt), которое отображает уценку (используя markdown-it). Я создал плагин для markdown-it. Плагин находится в каталоге «помощников».

nuxt.config. js

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

Мой плагин - «../helpers/MarkdownNGH». Я также добавил еще один плагин markdown-it-div для тестирования. Этот плагин установлен с 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
 }
}

Теперь, когда я запускаю 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)

В моем сгенерированном приложении. 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), и он отлично работает как при рендеринге на стороне сервера, так и в браузере. Я довольно нубан с веб-пакетом и тому подобным, так что это может быть просто какая-то проблема с конфигурацией и т.д. c до 

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

но это не помогло. Не уверен, правильно ли я это сделал.

1 Ответ

0 голосов
/ 14 января 2020

Это ошибка (или отсутствующая функция) в @ nuxtjs / markdownit. Для этого есть PR: https://github.com/nuxt-community/modules/pull/323

Когда PR объединен (или вы создаете уценку с его помощью), измените код плагина на 

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