This crashes in next.js because you are trying to use "window"

[hassanzadeh]

This does not work with next.js framework because you are using "window" somewhere in your code and that cannot be rendered on the server: index.js?20a9:314 Uncaught at isBrowserSupported (file:///Users/hh/Workspaces/mb/node_modules/@twilio/video-processors/es5/utils/support.js:8:5) at Object. (file:///Users/hh/Workspaces/mb/node_modules/@twilio/video-processors/es5/utils/support.js:23:23) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:14) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:92:18) at Object. (file:///Users/hh/Workspaces/mb/node_modules/@twilio/video-processors/es5/index.js:21:17) at Module._compile (internal/modules/cjs/loader.js:1085:14) getNodeError @ nodeStackFrames.js?aca3:40 eval @ index.js?20a9:313 setTimeout (async) _callee$ @ index.js?20a9:301 tryCatch @ runtime.js?96cf:63 invoke @ runtime.js?96cf:293 eval @ runtime.js?96cf:118 asyncGeneratorStep @ index.js?20a9:28 _next @ index.js?20a9:46 Promise.then (async) asyncGeneratorStep @ index.js?20a9:37 _next @ index.js?20a9:46 eval @ index.js?20a9:51 eval @ index.js?20a9:43 _initNext @ index.js?20a9:363 initNext @ index.js?20a9:366 eval @ next-dev.js?3346:38 ./node_modules/next/dist/client/next-dev.js @ main.js?ts=1635297231978:600 options.factory @ webpack.js?ts=1635297231978:658 webpack_require @ webpack.js?ts=1635297231978:37 webpack_exec @ main.js?ts=1635297231978:1399 (anonymous) @ main.js?ts=1635297231978:1400 webpackJsonpCallback @ webpack.js?ts=1635297231978:1241 (anonymous) @ main.js?ts=1635297231978:9

[charliesantos]

Hi @hassanzadeh , were you getting this error by just importing this module? Something like

import { isSupported } from '@twilio/video-processors';

[brianschrameck]

Also running into this issue and it's a blocker for us moving forward with using these filters in our Next.js application:

> Build error occurred
ReferenceError: window is not defined
    at isBrowserSupported (/Users/brian.schrameck/Projects/sandbox-video-chat/node_modules/@twilio/video-processors/es5/utils/support.js:8:5)
    at Object.<anonymous> (/Users/brian.schrameck/Projects/sandbox-video-chat/node_modules/@twilio/video-processors/es5/utils/support.js:23:23)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (/Users/brian.schrameck/Projects/sandbox-video-chat/node_modules/@twilio/video-processors/es5/index.js:21:17)
    at Module._compile (internal/modules/cjs/loader.js:1085:14) {
  type: 'ReferenceError'
}

I've submitted a PR which I believe addresses this issue.

[brianschrameck]

Hi @hassanzadeh , were you getting this error by just importing this module? Something like

import { isSupported } from '@twilio/video-processors';

I removed all imports/calls to isSupported in my code and still ran into the issue.

[charliesantos]

Thank you for submitting the fix @brianschrameck . We'll do our internal test cycles and we will release if everything passes. I'll close this ticket now.

[hassanzadeh]

Yes exactly, I think what you need to do is to use window inside side effects .

On Wed, Oct 27, 2021 at 2:55 PM Charlemagne Santos @.***> wrote:

Thank you for submitting the fix @brianschrameck https://github.com/brianschrameck . We'll do our internal test cycles and we will release if everything passes. I'll close this ticket now.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/twilio/twilio-video-processors.js/issues/32#issuecomment-953219125, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKOLHJOX6D57BNCSOBYFRDUJBDLFANCNFSM5GZDV3BA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- Sent from Gmail iPad

[charliesantos]

This has been fixed in 1.0.2.

[hassanzadeh]

Thanks @charliesantos , Also do you know if it is possible (in Next js) to add the assets under node_modules to the list of public directory ? I know with node_js we have can use express.static (if I recall) to do that.

Thanks

[hassanzadeh]

I'm seeing this error in the console, what is it about?

THanks

[charliesantos]

@hassanzadeh how are you including or loading the tflite-simd-1-0-0.js file?