search

dmnsgn / canvas-record

Record a video in the browser or directly on the File System from a canvas (2D/WebGL/WebGPU) as MP4, WebM, MKV, GIF, PNG/JPG Sequence using WebCodecs and Wasm when available.
https://dmnsgn.github.io/canvas-record/
MIT License
326 stars 18 forks source link

Server Error when trying to record #7

Closed user28111999 closed 3 years ago

user28111999 commented 3 years ago

Getting this error in a ReactJS/NextJS environment. Same error happens with the latest versions of Firefox and Chrome

Server Error
Error: Must use import to load ES Module: /home/user/Desktop/project/web/node_modules/canvas-record/index.js
require() of ES modules is not supported.
require() of /home/user/Desktop/project/web/node_modules/canvas-record/index.js from /home/user/Desktop/project/web/.next/server/pages/project/promo-kit.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/user/Desktop/project/web/node_modules/canvas-record/package.json.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.Module._extensions..js
internal/modules/cjs/loader.js (1080:13)
Module.load
internal/modules/cjs/loader.js (928:32)
Function.Module._load
internal/modules/cjs/loader.js (769:14)
Module.require
internal/modules/cjs/loader.js (952:19)
require
internal/modules/cjs/helpers.js (88:18)
Object.canvas-record
file:///home/user/Desktop/project/web/.next/server/pages/project/promo-kit.js (919:18)
__webpack_require__
file:///home/user/Desktop/project/web/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./components/ThreePromoKitAnim.js (20:71)
Object../components/ThreePromoKitAnim.js
file:///home/user/Desktop/project/web/.next/server/pages/project/promo-kit.js (382:1)
__webpack_require__
file:///home/user/Desktop/project/web/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./pages/project/promo-kit.js (7:86)
Object../pages/project/promo-kit.js
file:///home/user/Desktop/project/web/.next/server/pages/project/promo-kit.js (701:1)
__webpack_require__
file:///home/user/Desktop/project/web/.next/server/webpack-runtime.js (33:42)
__webpack_exec__
file:///home/user/Desktop/project/web/.next/server/pages/project/promo-kit.js (1203:52)
<unknown>
file:///home/user/Desktop/project/web/.next/server/pages/project/promo-kit.js (1204:28)
Object.<anonymous>
file:///home/user/Desktop/project/web/.next/server/pages/project/promo-kit.js (1207:3)

I did import canvasRecord and canvasContext like the example from the README.mdand I'm using the same example code in auseEffect()`

dmnsgn commented 3 years ago

require() of ES modules is not supported.

Are you using require("canvas-record") in an es module or have a transform on your code that changes everything to cjs? You might need to change the way you import things: https://nodejs.org/api/esm.html#esm_differences_between_es_modules_and_commonjs

user28111999 commented 3 years ago

require() of ES modules is not supported.

Are you using require("canvas-record") in an es module or have a transform on your code that changes everything to cjs? You might need to change the way you import things: https://nodejs.org/api/esm.html#esm_differences_between_es_modules_and_commonjs

Thanks, this worked.