I have been working on developing a Nuxt.js application utilizing markdown rendering with markdown-it. To achieve this, I created a custom plugin located in the "helpers" directory.
nuxt.config.js
...
modules: [
...,
'@nuxtjs/markdownit',
]
],
...
markdownit: {
preset: 'commonmark',
injected: true,
use: [
'../helpers/MarkdownNGH',
'markdown-it-div'
]
},
The custom plugin I created is called '../helpers/MarkdownNGH'. Additionally, I included another plugin called markdown-it-div for testing purposes, which was installed via npm.
helpers/MarkdownNGH
module.exports = function plugin (md) {
md.rendered.rules.link_open = (tokens, idx, options, env, self) => {
// The logic for handling links is not relevant to this question
}
}
Upon running npm run dev, server-side rendering functions correctly and my plugin successfully modifies the markdown rendering as intended.
An issue arises when accessing the page in the browser, resulting in an error message displayed in the 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)
The generated app.js contains the following code related to 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
In comparison, I followed a similar approach to how markdown-it-div was implemented (https://github.com/kickscondor/markdown-it-div/blob/master/index.js) and it works flawlessly in both server-side rendering and browser rendering. My knowledge regarding webpack and related configurations is limited, hence it may be due to a configuration issue.
EDIT: I attempted the solution mentioned here: and modified .babelrc as follows:
{
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
"sourceType": "unambiguous"
},
"dev": {
"sourceType": "unambiguous"
}
}
}
However, this did not resolve the issue. I am uncertain if the modification was correctly applied.