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

[TaylorHo]

Same error here, I'm using Svelte with SvelteKit and Vite.

Full error output:

✘ [ERROR] No loader is configured for ".keep" files: node_modules/latex.js/dist/documentclasses/.keep

    node_modules/latex.js/dist/latex.mjs:2:204145:
      2 │ ...y declare one class.")},!(i=A[r]))try{i=(o=require("./documentclasses/"+r)).default||o[Object.getOwnPropertyNames(o)[0]]}cat...
        ╵                                                       ~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".keep" files: node_modules/latex.js/dist/packages/.keep

    node_modules/latex.js/dist/latex.mjs:2:204648:
      2 │ ...)if(l=n[a],!e.includes(l)){u=_[l];try{u||(u=(c=require("./packages/"+l)).default||c[Object.getOwnPropertyNames(c)[0]]),er(th...
        ╵                                                           ~~~~~~~~~~~~~~~

7:43:39 PM [vite] (client) error while updating dependencies:
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
    at failureErrorWithLog (/Users/taylor/projetos/editor/node_modules/esbuild/lib/main.js:1476:15)
    at /Users/taylor/projetos/editor/node_modules/esbuild/lib/main.js:945:25
    at /Users/taylor/projetos/editor/node_modules/esbuild/lib/main.js:1354:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Entering the node_modules/latex.js/dist/ folder and manually removing the .keep files inside the documentclasses/ and packages/ folders resolved, but doing this manually is a bad workaround :/

Is there a better solution?

[Wyrdix]

To everyone with this error, as i understand the only role of ".keep" files is for their related folders to exists in the node_modules
To prevent this issue you have to find a way to tell the loader to consider theses files as empty, or text, or anything else that will not cause problem

For those using svelte (as it was my case) you can do something like this :

(In vite.config.ts)

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
	optimizeDeps: {
		esbuildOptions: {
			loader: {
				'.keep': 'empty'
			}
		}
	}
});

[doug-sheridan]

To everyone with this error, as i understand the only role of ".keep" files is for their related folders to exists in the node_modules To prevent this issue you have to find a way to tell the loader to consider theses files as empty, or text, or anything else that will not cause problem

For those using svelte (as it was my case) you can do something like this :

(In vite.config.ts)

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
plugins: [sveltekit()],
optimizeDeps: {
esbuildOptions: {
loader: {
'.keep': 'empty'
}
}
}
});

This solved my issue using React.js + latex.js + Vite!