Errors intergrating with nuxt3.

[Tennyleaz]

I'm trying to add latex.js in my nuxt3 web app. When running in development mode npm run dev I got these errors:

Error: Build failed with 2 errors:
node_modules/latex.js/dist/latex.mjs:2:204145: ERROR: No loader is configured for ".keep" files: node_modules/latex.js/dist/documentclasses/.keep
node_modules/latex.js/dist/latex.mjs:2:204648: ERROR: No loader is configured for ".keep" files: node_modules/latex.js/dist/packages/.keep

When build npm run build I got no error, but instead errors running the app in browser:

error loading documentclass "minimal": ReferenceError: require is not defined

My minimal package.json is like:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "latex.js": "^0.12.6",
    "nuxt": "^3.11.2",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2",
    "vuetify-nuxt-module": "^0.14.0"
  }
}

My sample usage is like:

<template>
  <div id='result'>
    <v-btn @click="onTest">Test</v-btn>
  </div>
</template>

<script lang="ts">
import { parse, HtmlGenerator } from "latex.js";
export default defineNuxtComponent({
  methods: {
    onTest() {
      const latex = "\\documentclass{minimal}\n\\begin{document}\nHello\n\\end{document}";
      let generator = new HtmlGenerator({ hyphenate: false });
      generator = parse(latex, { generator: generator });
      document.head.appendChild(generator.stylesAndScripts(""))
      (document.getElementById("result") as HTMLDivElement).appendChild(generator.domFragment())
    },
  }
});
</script>

Any help is appreciated.

[yashraut19]

facing same issue