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/vite-node@1.5.0_sass@1.75.0/node_modules/vite-node/dist/client.mjs:362:11)
  at ViteNodeRunner.directRequest (node_modules/.pnpm/vite-node@1.5.0_sass@1.75.0/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/vite-node@1.5.0_sass@1.75.0/node_modules/vite-node/dist/client.mjs:189:14)
  at async ViteNodeRunner.dependencyRequest (node_modules/.pnpm/vite-node@1.5.0_sass@1.75.0/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 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:  pnpm@9.3.0
- Builder:          -
- User Config:      modules, future, hub, fonts, tailwindcss, shadcn, devtools
- Runtime Modules:  shadcn-nuxt@0.10.4, @nuxt/fonts@0.7.0, @nuxt/eslint@0.3.13, @nuxthub/core@0.6.14, @nuxtjs/tailwindcss@6.12.0, nuxt-icon@0.6.10, @nuxt/image@1.7.0, @nuxtjs/mdc@0.8.0
- 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'
      }
    }
  },