Add local remark plugin

[Benbinbin]

Environment

• Operating System: Windows_NT
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-rc.6
• Package Manager: npm@8.1.2
• Builder: vite
• User Config: app, typescript, modules, colorMode, content
• Runtime Modules: @nuxt/content@2.1.0-27639343.b832f24, @nuxtjs/tailwindcss@5.3.0, @nuxtjs/color-mode@3.1.4
• Build Modules: -

Reproduction

https://github.com/Benbinbin/nuxt-content-local-remark-plugin

Describe the bug

The former documentation show how to use the local remark plugin, like ~/markdownPlugins/remark-plugin.js

but the new documentation delete this part

when I use the same syntax which is mentioned at the old documentation

export default defineNuxtConfig({
  // ...
  content: {
    // ...
    markdown: {
      remarkPlugins: ['~/markdownPlugins/remarkPlugin.js']
    }
  }
})

but then I get an error (see th Logs part 👇 ) it recognizes the local remark plugin file as a package?

maybe the old documentation just suitable for content v1, any new way to add local remark plugin for content v2?

Additional context

some relative issues about plugin:

• 1226

• 1212

Logs

[nuxt] [request error] Cannot find package '~' imported from D:\Work\Code\Web\Frontend\Nuxt\nuxt-content-local-remark-plugin\.nuxt\dev\index.mjs
  at new NodeError (node:internal/errors:371:5)  
  at packageResolve (node:internal/modules/esm/resolve:884:9)  
  at moduleResolve (node:internal/modules/esm/resolve:929:18)  
  at defaultResolve (node:internal/modules/esm/resolve:1044:11)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
  at ESMLoader.import (node:internal/modules/esm/loader:276:22)
  at importModuleDynamically (node:internal/modules/esm/translators:111:35)
  at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
  at importPlugins (/D:/Work/Code/Web/Frontend/Nuxt/nuxt-content-local-remark-plugin/.nuxt/dev/index.mjs:1096:32)

[NozomuIkuta]

Here is a debug memo.

Nuxt Content v2 dynamically imports plugins without resolving Nuxt aliases, so they are assumed to be inside node_modules.

https://github.com/nuxt/content/blob/ede65e8337ca3eb597af95c17cfc609e4015238c/src/runtime/server/transformers/markdown.ts#L25-L38

Nuxt Content v1 resolves aliases by resolver:

https://github.com/nuxt/content/blob/776e428eb2987e5a8c237fbc90e2d9beb8e3b0e3/packages/content/lib/utils.js#L58-L83

[ManasMadrecha]

@NozomuIkuta How to solve it then?

[Benbinbin]

@ManasMadrecha My solution is adding the custom Remark plugins as a npm module, you can check this repo for more detail.

Refer to this stackoverflow answer.

[ManasMadrecha]

@Benbinbin

In the BlogiNote link you shared, we don't need to actually publish the plugin to npm, right?
Just use the plugin offline and just change the link in the Package.json to file:... and then Content Module will be able to pick it up, right?

[Benbinbin]

@ManasMadrecha yep, you're right

[ManasMadrecha]

@Benbinbin Amazing! BTW, your website's Table of Contents is just next level. It's magical... 😮👍🏻

Image


[innocenzi]

Seems quite inconvenient for one-time, project-specific plugins. Is there not a syntax for importing local plugins?

[Benbinbin]

Seems quite inconvenient for one-time, project-specific plugins. Is there not a syntax for importing local plugins?

@innocenzi maybe the hook content:file:afterParse provided by Nuxt Content is the alternative solution for remark or rehype plugin

[ManasMadrecha]

@Benbinbin But the hook content:file:afterParse works as only rehype plugin and not remark plugin. Still, need to install a local remark plugin as npm module 😮‍💨

[DraftProducts]

Are there news about this regression ?