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:

• feat(markdown): allow overwriting plugins #1226
• Can't override default plugins #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.

content/src/runtime/server/transformers/markdown.ts

Lines 25 to 38 in ede65e8

	async function importPlugins (plugins: Record<string, false | MarkdownPlugin> = {}) {
	const resolvedPlugins = {}
	for (const [name, plugin] of Object.entries(plugins)) {
	if (plugin) {
	resolvedPlugins[name] = {
	instance: await import(name).then(m => m.default || m),
	...plugin
	}
	} else {
	resolvedPlugins[name] = false
	}
	}
	return resolvedPlugins
	}

Nuxt Content v1 resolves aliases by resolver:

content/packages/content/lib/utils.js

Lines 58 to 83 in 776e428

	const processMarkdownPlugins = (type, markdown, resolvePath) => {
	const plugins = []
	for (const plugin of markdown[`${type}Plugins`]) {
	let name
	let options
	let instance
	if (typeof plugin === 'string') {
	name = plugin
	options = markdown[camelCase(name)]
	} else if (Array.isArray(plugin)) {
	[name, options] = plugin
	}
	try {
	instance = require(resolvePath(name))
	plugins.push({ instance, name, options })
	} catch (e) {
	logger.error(e.toString())
	}
	}
	return plugins
	}

[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 ?