Custom Rehype plugin import & module

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 https://github.com/nuxt/content/issues/624

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