Why installing Canvas UI of austintoddj/canvas package I got error ?

I try to install to fresh laravel (^10.43.0) app https://github.com/austintoddj/canvas package("austintoddj/canvas": "^6.0")

But After I installed Canvas UI I got next error :

$ npm install && npm run canvas.ui.dev

up to date, audited 894 packages in 3s

108 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 /mnt/_work_sdb8/wwwroot/lar/NewsPublisher/webpack.mix.js from /mnt/_work_sdb8/wwwroot/lar/NewsPublisher/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 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 /mnt/_work_sdb8/wwwroot/lar/NewsPublisher/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

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

In my webpack.mix.js I have :

      const mix = require('laravel-mix');

       mix.js('resources/js/canvas-ui/app.js', 'public/js/canvas-ui.js').vue()
       .sass('resources/sass/canvas-ui.scss', 'public/css/canvas-ui.css');

And in vite.config.js :

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

How can I fix it ?