Server Error when trying to record
user28111999 opened this issue · comments
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()`
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
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.