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

[D0nVitalio]

Having same ERR_REQUIRE_ESM on L10.

I did what @pocketnest-erik said:
"canvas.ui.dev": "vite",
"canvas.ui.prod": "vite --production",
but only
npm run canvas.ui.dev worked

"canvas.ui.prod": "vite --production", -caused error

file:///C:/xmp8/htdocs/blog/node_modules/vite/dist/node/cli.js:444
          throw new CACError(`Unknown option \`${name.length > 1 ? `--${name}` : `-${name}`}\``);
                ^
CACError: Unknown option `--production`

I looked a while on cli.js and finally did:

"scripts": {
        "build": "vite build",
        "canvas.ui.dev": "vite",
        "canvas.ui.prod": "vite build",
        "dev": "vite"
    },

now npm run canvas.ui.prod - works too

@nsaliu - can you try?

[nsaliu]

I have the same config with vite and vite --production but as you can see in my previous comment unfortunately both dev and prod are not working.

[D0nVitalio]

I have the same config with vite and vite --production but as you can see in my previous comment unfortunately both dev and prod are not working.

I found
https://github.com/EstebanBetancur1/Laravel-10-mix.git
and with
composer require austintoddj/canvas:6.0.46 (last version with webpack)
then standard commands
it works bundles, but, when go to http://127.0.0.1:8000/canvas-ui
shows error not found css and js files (resources\views\canvas-ui.blade.php)
Unable to locate Mix file: /css/canvas-ui.css.

I edited css an js to:

<link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
<script type="text/javascript" src="{{ mix('js/app.js') }}"></script>

But got blank, white page. These js and css not giving 404.. Do you have idea?

my mix-manifest:

{
    "/js/app.js": "/js/app.js?id=3caaf107f14c6acdd88ea95d1433360",
    "/css/app.css": "/css/app.css?id=f9d9b96ee481202ee618b2c7760b1ea"
}

So I guess I have edited resources\views\canvas-ui.blade.php correctly

[D0nVitalio]

@nsaliu
Laravel 8 with composer require austintoddj/canvas:6.0.46
bundles with a lot warnings... but it works! http://127.0.0.1:8000/canvas-ui opens
If you will be able to run canvas on L9,L10,L11 let us know