Install canvas:ui

[scrappy]

Followed instructions ( I thought ) on the github page, but I get this:

`web:~/www> npm install && npm run canvas.ui.dev
npm WARN deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated [email protected]: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.

added 833 packages, and audited 834 packages in 22s

94 packages are looking for funding
run npm fund for details

5 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

canvas.ui.dev
mix

[webpack-cli] Error [ERR_REQUIRE_ESM]: require() of ES Module /var/www/open_iaps/www/webpack.mix.js from /var/www/open_iaps/www/node_modules/laravel-mix/setup/webpack.config.js not supported.
webpack.mix.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename webpack.mix.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /var/www/open_iaps/www/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

at module.exports (/var/www/open_iaps/www/node_modules/laravel-mix/setup/webpack.config.js:11:5)
at loadConfigByPath (/var/www/open_iaps/www/node_modules/webpack-cli/lib/webpack-cli.js:1439:37)
at async Promise.all (index 0)
at async WebpackCLI.loadConfig (/var/www/open_iaps/www/node_modules/webpack-cli/lib/webpack-cli.js:1454:35)
at async WebpackCLI.createCompiler (/var/www/open_iaps/www/node_modules/webpack-cli/lib/webpack-cli.js:1785:22)
at async WebpackCLI.runWebpack (/var/www/open_iaps/www/node_modules/webpack-cli/lib/webpack-cli.js:1890:20)
at async Command.<anonymous> (/var/www/open_iaps/www/node_modules/webpack-cli/lib/webpack-cli.js:912:21)
at async Promise.all (index 1)
at async Command.<anonymous> (/var/www/open_iaps/www/node_modules/webpack-cli/lib/webpack-cli.js:1372:13) {

code: 'ERR_REQUIRE_ESM'
}`

running on Laravel 11.x ...

Am I doing something wrong?

[dirkblack]

Had the same issue. I got rid of the "type" line in package.json and mix compiled.

"type": "commonjs",