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