Custom Rehype plugin import & module

[devwearsprada]

Environment

---

• Operating System: Darwin
• Node Version: v14.19.0
• Nuxt Version: 3.0.0-rc.3
• Package Manager: yarn@1.22.17
• Builder: vite
• User Config: modules, content
• Runtime Modules: @nuxt/content@2.0.0
• Build Modules: -

---

Reproduction

https://codesandbox.io/s/compassionate-fermat-643o1d?file=/plugins/rehype-nuxt-image.js
https://codesandbox.io/s/compassionate-fermat-643o1d?file=/nuxt.config.ts

Describe the bug

I'm trying to build a custom rehype plugin that will convert ![]() syntax to <nuxt-img/> as described in an older issue #911. While trying to get this to plugin running, I'm encountering two different bugs/errors. I've made a minimal reproduction on codesandbox to showcase the errors.

1: Import using the tilde ~

When importing the rehype-nuxt-image.js from the plugins directory using the tilde (as described in the docs. Navigating to the link doesn't work for me but its in the v2 docs under API -> markdown), I'm receiving the following error:

[nuxt] [request error] Cannot find package '~' imported from /sandbox/.nuxt/dev/index.mjs
  at new NodeError (internal/errors.js:322:7)
  at packageResolve (internal/modules/esm/resolve.js:687:9)
  at moduleResolve (internal/modules/esm/resolve.js:728:18)
  at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
  at Loader.resolve (internal/modules/esm/loader.js:89:40)
  at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
  at Loader.import (internal/modules/esm/loader.js:177:28)
  at importModuleDynamically (internal/modules/esm/translators.js:114:35)
  at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:30:14)
  at importPlugin (./.nuxt/dev/index.mjs:2461:17)

I think I've found a workaround for now using by importing the plugin like so: ../../plugins/rehype-nuxt-image.js. After using this to import the plugin, the following error shows up.

2: ESM import error

In the rehype-nuxt-image.js I'm importing visit from unist-util-visit. This causes nuxt to throw an ESM import error:

(node:91) Warning: To load an ES module, set "type": "module" in thepackage.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
[nuxt] [request error] Cannot use import statement outside a module
  at wrapSafe (internal/modules/cjs/loader.js:1001:16)
  at Module._compile (internal/modules/cjs/loader.js:1049:27)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
  at Module.load (internal/modules/cjs/loader.js:950:32)
  at Function.Module._load (internal/modules/cjs/loader.js:790:12)
  at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
  at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
  at async Loader.import (internal/modules/esm/loader.js:178:24)
  at async importPlugin (./.nuxt/dev/index.mjs:2461:3)
  at async Promise.all (index 0)

Again, I'm not sure but I think transpiling unist-util-visit is not necessary as it is an ES module. I tried transpiling with using the transpile option in nuxt.config.ts without any luck.

This is one of my first issues ever, so let me know if you need more information or I'm just being silly for what I'm trying to do.

Additional context

No response

Logs

No response

[farnabaz]

Unfortunately currently V2 does not support custom plugins, you can only use published packages for plugins.
This is a planned feature but there is not estimated time to support it. (A temporary solution is to publish your plugin on NPM)

Note:

• In v2 you don't need to implement custom remark plugin to change image tags, you can simple overwrite ProseImg component and implement you own logic for images.

• Nuxt Image module is not compatible with Nuxt3 yet, keep track in Support for @nuxt/image #624

[devwearsprada]

Thank you for your response. Overwriting the ProseImg component makes a lot of sense! I'll keep an eye out for the Nuxt Image module and in the meantime make a custom component.

[dantaeyoung]

@farnabaz Would you have any documentation for overwriting the ProseImg component (or any other Nuxt Content component, for that matter?)

[devwearsprada]

@farnabaz Would you have any documentation for overwriting the ProseImg component (or any other Nuxt Content component, for that matter?)

I found the documentation for overwriting Prose components over here

[dantaeyoung]

@devwearsprada Thank you!!

[danvega]

Now that Nuxt Image is out for Nuxt 3 has anyone gotten this to work? I would like to use a custom plugin that uses nuxt-img for all of my images in markdown.

[danvega]

@devwearsprada Do you have an example of overwriting ProseImg with nuxt-img?

[ManasMadrecha]

@danvega Check this #911 (comment) for solution based on using rehype-plugin to change any HTML tag to anything you like, while using normal md syntax for images in md file, instead of typing nuxt-img for every image.

[farnabaz]

@danvega You can simply create ~/components/content/ProseImg.vue and use <NuxtImg/> inside this components. This way content module renders your custom component instead of the internal and you can fully customize the image UI.

[danvega]

That is what I ended up doing.

<template>
  <nuxt-img :src="src" :alt="alt" :width="width" :height="height" loading="lazy" />
</template>

<script setup lang="ts">
const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  alt: {
    type: String,
    default: ''
  },
  width: {
    type: [String, Number],
    default: undefined
  },
  height: {
    type: [String, Number],
    default: undefined
  }
});

onMounted(() => {
  console.log(props.src);
})
</script>

I think I need to understand what nuxt-img does a little bit better. When I reference /images in my markdown it's still looking in public/images. Is there a way I can use a relative link to the markdown file?

![Wes](./wes-hicks-4-EeTnaC1S4-unsplash.jpg)