An error occurred after installation

[helloshaohua]

 ERROR  Cannot find module './emojis'
Require stack:
- /Users/kitty/workspace/vue/hello.com/emojilib

  Require stack:
  - emojilib
  at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
  at Module._load (node:internal/modules/cjs/loader:981:27)
  at Module.require (node:internal/modules/cjs/loader:1231:19)
  at require (node:internal/modules/helpers:177:18)
  at emojilib:2:8
  at ViteNodeRunner.runModule (node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:362:11)
  at ViteNodeRunner.directRequest (node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:346:16)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async ViteNodeRunner.cachedRequest (node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:189:14)
  at async ViteNodeRunner.dependencyRequest (node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:233:12)

[farnabaz]

Do you mind creating a simple reproduction?

[gtwww]

@atinux @farnabaz @helloshaohua Hi~ I also encountered this issue, and it can be resolved by wrapping the code with <ClientOnly>, However, this is not the final solution.

dependencies:
@nuxt/image 1.7.0
@nuxt/ui 2.16.0
@nuxtjs/mdc 0.7.0
nuxt 3.11.2
vue 3.4.27
vue-router 4.3.2
zod 3.23.8

devDependencies:
@iconify-json/ri 1.1.20
@iconify-json/solar 1.1.9

[imlautaro]

Same thing happened to me, I solved it by adding .client.vue to my component but as they said previously, not the final/ideal solution.

[RihanArfan]

Fixed it by creating .npmrc with shamefully-hoist=true content.

Without shamfully hoisting, making the page .client.vue also worked for me. Wrapping with <ClientOnly> didn't seem to work though, which I found odd but I didn't debug further.

------------------------------
- Operating System: Linux
- Node Version:     v20.14.0
- Nuxt Version:     3.12.1
- CLI Version:      3.12.0
- Nitro Version:    2.9.6
- Package Manager:  [email protected]
- Builder:          -
- User Config:      modules, future, hub, fonts, tailwindcss, shadcn, devtools
- Runtime Modules:  [email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxthub/[email protected], @nuxtjs/[email protected], [email protected], @nuxt/[email protected], @nuxtjs/[email protected]
- Build Modules:    -
------------------------------

// pages/index.vue
<script setup lang="ts">
const sampleText = `
# Hello

This is a sample markdown text.
`;
</script>

<template>
  <div>
    <MDC :value="sampleText " tag="article" />
  </div>
</template>

[senhuaa]

I had this problem for a few days, and I found a solution.

pnpm add remark-emoji

then

//nuxt.config.ts
mdc: {
    remarkPlugins: {
      emoji: {
        src: 'remark-emoji'
      }
    }
  },