Nuxt•2mo ago

Bun not found in nuxt application?

This is the file im trying to apply on my app - route: utils/logger.vue

// utils/logger.vue
import Bun from 'bun';

const file = Bun.file("foo.log");
const writer = file.writer();

export { writer };

// utils/logger.vue
import Bun from 'bun';

const file = Bun.file("foo.log");
const writer = file.writer();

export { writer };

The code works, i do see the output in foo.log. However, after that the app crashes saying there is no module bun defined. This is every weird and cant find documentation on the problem implementation:

// pages/index.vue
<script setup lang="ts">
const route = useRoute()
import { writer } from '~/utils/logger'

async function testWrite() {
    await writer.write("We are at the index app");
    await writer.end(); // Don't forget to close the writer when done
}

testWrite();
</script>

<template>
  <div>
    <h1>Nuxt Routing set up successfully!</h1>
    <p>Current route: {{ route.path }}</p>
    <a href="https://nuxt.com/docs/getting-started/routing" target="_blank">Learn more about Nuxt Routing</a>
  </div>
</template>

// pages/index.vue
<script setup lang="ts">
const route = useRoute()
import { writer } from '~/utils/logger'

async function testWrite() {
    await writer.write("We are at the index app");
    await writer.end(); // Don't forget to close the writer when done
}

testWrite();
</script>

<template>
  <div>
    <h1>Nuxt Routing set up successfully!</h1>
    <p>Current route: {{ route.path }}</p>
    <a href="https://nuxt.com/docs/getting-started/routing" target="_blank">Learn more about Nuxt Routing</a>
  </div>
</template>

8 Replies

kapa.ai•2mo ago

Hi @IsaacR943. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can explain why you're encountering this issue and suggest a solution. The problem you're experiencing is related to the use of Bun in a Nuxt application. Bun is a JavaScript runtime and package manager, but it's not directly integrated into Nuxt applications by default. Here are a few key points to consider: 1. Nuxt primarily uses Node.js as its runtime environment. While Bun can be used to run Nuxt applications, it's not a standard part of the Nuxt ecosystem. 2. The Bun object and its file API that you're trying to use in your logger.vue file are specific to the Bun runtime and are not available in a standard Node.js or browser environment. 3. Nuxt applications typically run both on the server (Node.js) and in the browser, where Bun-specific APIs are not available. To resolve this issue, you have a few options: 1. If you're specifically trying to use Bun as your runtime for Nuxt, you need to ensure that you're running your Nuxt application with Bun. However, this is not a standard setup and may lead to compatibility issues. 2. If you're using Node.js (which is the standard for Nuxt), you should use Node.js file system APIs instead of Bun's. You can use the fs module for file operations in server-side code. 3. Keep in mind that client-side code (running in the browser) doesn't have direct access to the file system for security reasons. File operations should typically be handled on the server side. Here's an example of how you might modify your code to work in a standard Nuxt setup using Node.js:

// server/utils/logger.js
import fs from 'fs';

const writer = fs.createWriteStream("foo.log", { flags: 'a' });

export { writer };

// server/utils/logger.js
import fs from 'fs';

const writer = fs.createWriteStream("foo.log", { flags: 'a' });

export { writer };

Then in your Vue component:

// pages/index.vue
<script setup>
const route = useRoute()
async function testWrite() {
  const { writer } = await import('~/server/utils/logger');
  await new Promise((resolve) => writer.write("We are at the index app\n", resolve));
}

testWrite();
</script>

<template>
  <div>
    <h1>Nuxt Routing set up successfully!</h1>
    <p>Current route: {{ route.path }}</p>
    <a href="<https://nuxt.com/docs/getting-started/routing"> target="_blank">Learn more about Nuxt Routing</a>
  </div>
</template>

// pages/index.vue
<script setup>
const route = useRoute()
async function testWrite() {
  const { writer } = await import('~/server/utils/logger');
  await new Promise((resolve) => writer.write("We are at the index app\n", resolve));
}

testWrite();
</script>

<template>
  <div>
    <h1>Nuxt Routing set up successfully!</h1>
    <p>Current route: {{ route.path }}</p>
    <a href="<https://nuxt.com/docs/getting-started/routing"> target="_blank">Learn more about Nuxt Routing</a>
  </div>
</template>

Note that this server-side code should be placed in the server/ directory of your Nuxt project to ensure it only runs on the server. For more information on Nuxt's directory structure and how to handle server-side operations, you can refer to the Nuxt documentation on directory structure. Remember, if you're specifically trying to use Bun with Nuxt, you're venturing into relatively uncharted territory, as Bun support for Nuxt is still evolving. You might encounter various compatibility issues along the way. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1223715160502571129> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

.❀ tablet ❀.•5w ago

what command are you running? if you're running bun dev or bun run dev, ensure you're using the bun runtime by adding the --bun flag, like bun --bun run dev or bun --bun dev

Mittchel•5w ago

or bun -b dev if it look like [500] Cannot find package 'vue' from '/home/Downloads/nuxt/@vue/server-renderer' then can be regression https://github.com/vuejs/vuefire/issues/1599#issuecomment-2614531210 try with path or 3.15.2

IsaacR943OP•4w ago

Thanks, will try throughout the day. - I've heard the --bun works for some people however is not my case. The explanation I received from someone of the Nuxt team that contacted me for this error is that some process (possible a library) is using node - breaking the application and making the --bun flag useless. However he did not mentioned anything about how to identify what library was doing this lol.

Mittchel•4w ago

disable nuxt modules one by one and try each time to run app. if not help remove npm modules one by one may be will found what do troubles.

IsaacR943OP•4w ago

Yeah, i guess thats the definitive solution Mittchel - have you publish a nuxt app to the appstore? Do you know which framework I should use?

Mittchel•4w ago

Do you have so many options? If wit nuxt when Dany created https://ionic.nuxtjs.org/

Get Started

Batteries-included Ionic integration for Nuxt.

Gaming

Programming

Bun not found in nuxt application?

Did you find this page helpful?