Uncaught ReferenceError: window is not defined

[octave]

When using @segment/analytics-next@1.76.0 in a @shopify/hydrogen@2024.10.0 application, deploying fails after building with this error:

 Uncaught ReferenceError: window is not defined  
   at worker.mjs:5087:5433                                                  
   at worker.mjs:5087:17531   

After investigating the worker.mjs the issue seems to be coming from analytics.js-video-plugins that is being added at the end of the worker.mjs file, even though I only import AnalyticsBrowser:

import {AnalyticsBrowser} from '@segment/analytics-next';

It works fine in development but it fails to deploy. Is it possible to not have analytics.js-video-plugins added to the build?

[silesky]

@octave There is no current way to exclude analytics.js-video-plugins.

The window object is assumed to be available. Disabling this plugin probably wouldn't be sufficient, as fixing this error would probably just mean another error appears in another plugin.

If you want to test simply disabling it, you can use this (unstable, use at your own risk API):

  analytics.load({ writeKey: 'foo' }, {
    updateCDNSettings: (unstableSettings) => {
      unstableSettings.legacyVideoPluginsEnabled = false
      return settings
  } })

[octave]

@silesky got it, I ended up reverting to using the script tag directly, this way it doesn't get bundled in the app and so the deployment works. Thanks!

[jeffreyhshapiro]

if anyone in the future might be having this issue and is using shopify hydrogen + remix with vite, the following worked for me:

// file where package is used

useEffect(() => {
   if (typeof window === 'undefined') return;
   import('@segment/analytics-next').then((res) => //do stuff )
}, []) 

// vite.config.js

export default defineConfig({
   ...config,
   ssr: {
        external: ["@segment/analytics-next"],
        optimizeDeps: [
            ...otherDeps,
            '@segment/analytics-next'
        ]
   }
})

the dynamic import in the useEffect imports the package only in the browser, the external field ensures that vite doesnt process the package in SSR.

if using TS and need typings, make sure to use import type to exclude the actual bundle from the build

this way, when the prod build is created, analytics-next isn't included until the dynamic import happens, and vite is forced to exclude it from SSR with the external field

i wish i understood this still a little better but i believe this is why it works 🤔

thanks to @octave for documenting this issue and saving me so many hours of debugging