Nuxt•4d ago

what is the requireJs alternative?

I have a dependency called videojs that needs global/window. however that doesn't exist and I found an issue (https://github.com/videojs/video.js/issues/5680#issuecomment-570120497) that shows a fix but it requires requirejs.

GitHub

videojs 7 requirejs js error: Script error for: global/window · Is...

Description package with requirejs make errors. Uncaught Error: Script error for: global/window Uncaught Error: Script error for: global/document my mainConfigFile like this requirejs.config({ path...

4 Replies

kapa.ai•4d ago

Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt, when dealing with libraries that need access to the global/window object (like videojs), you have several approaches to handle this without requiring RequireJS. Client-side only initialization The most common approach is to initialize such libraries only on the client side using the onMounted lifecycle hook:

import { onMounted } from 'vue'

onMounted(() => {
  // Import and initialize videojs here
  // This code only runs in the browser where window is available
})

import { onMounted } from 'vue'

onMounted(() => {
  // Import and initialize videojs here
  // This code only runs in the browser where window is available
})

Using a client plugin For a more global solution, you can create a client-side plugin:

// plugins/videojs.client.js
export default defineNuxtPlugin((nuxtApp) => {
  // Initialize videojs here
  // The .client.js suffix ensures this only runs on the client
})

// plugins/videojs.client.js
export default defineNuxtPlugin((nuxtApp) => {
  // Initialize videojs here
  // The .client.js suffix ensures this only runs on the client
})

Using Nuxt Scripts module For third-party scripts, you can use the Nuxt Scripts module which provides better control over script loading:

// With nuxt/scripts module
export default defineNuxtConfig({
  scripts: {
    // Configure videojs loading here
  }
})

// With nuxt/scripts module
export default defineNuxtConfig({
  scripts: {
    // Configure videojs loading here
  }
})

Nuxt Scripts provides features like lazy loading and better performance management for third-party scripts. For Node.js polyfills If your library specifically needs Node.js features in the browser, Nuxt offers an experimental feature called clientNodeCompat that automatically polyfills Node.js imports in the client build:

// nuxt.config.js
export default defineNuxtConfig({
  experimental: {
    clientNodeCompat: true
  }
})

// nuxt.config.js
export default defineNuxtConfig({
  experimental: {
    clientNodeCompat: true
  }
})

For specific globals like Buffer, you would need to manually inject them:

import { Buffer } from 'node:buffer'
globalThis.Buffer = globalThis.Buffer || Buffer

import { Buffer } from 'node:buffer'
globalThis.Buffer = globalThis.Buffer || Buffer

Experimental Features - clientNodeCompat Remember that when working with browser-specific APIs, you should always ensure they're only accessed in client-side code to avoid hydration mismatches or server-side errors. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Just SimeonOP•4d ago

I don't think this is the solution I will wait for a human

Just SimeonOP•4d ago

This is my code: https://pastes.dev/RtlmBQJmmA

pastes | RtlmBQJmmA

A paste containing 74 lines of javascript.

Gaming

Programming

what is the requireJs alternative?

Did you find this page helpful?