Unable to install Canvas UI

[nsaliu]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Admin
I cleaned and new Laravel 11 installation.
I executed these commands:

• composer require austintoddj/canvas
• php artisan canvas:install
• php artisan storage:link

And everything is fine - I can access the admin section and create posts.

UI
I executed these commands:

• php artisan canvas:ui
• npm install

when executing npm run canvas.ui.dev I'm receiving this error:

www-data@59b7af186f0b:~/html$ npm run canvas.ui.dev

> canvas.ui.dev
> mix

[webpack-cli] Error [ERR_REQUIRE_ESM]: require() of ES Module /var/www/html/webpack.mix.js from /var/www/html/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/html/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

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

Do you have any suggestions?
Thanks!

Expected Behavior

No response

Steps To Reproduce

No response

Environment

- php version: 8.3.8
- npm: 10.9.0
- node: v18.20.4
- vite: vite/5.4.10 linux-arm64 node-v18.20.4

Anything else?

No response

[ravenshill]

I am having the same issue, same sequence of commands

[nsaliu]

Any news here?

[pocketnest-erik]

Same issue.

What fixed it for me was changing the command in my package.json file. The base canvas installation assumes that laravel mix is still the default, when laravel has moved to Vite since 10.x.

just change mix to vite and give it a shot. Theres definitely more places where mix is expected that you have to fix to get it running