Vanilo 4.0 - npm issue
Closed this issue · 4 comments
Hi,
I upgraded to Vanilo 4.0 last week and I am stuck at the npm run prod
step where the following error is triggered :
ERROR in ./vendor/konekt/appshell/src/resources/assets/sass/appshell.sass
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Missing argument $border-radius.
┌──> vendor/konekt/appshell/src/resources/assets/sass/appshell/_buttons.sass
2 │ +button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $border-radius-xs)
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
╵
┌──> node_modules/bootstrap/scss/mixins/_buttons.scss
104 │ @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ declaration
╵
vendor/konekt/appshell/src/resources/assets/sass/appshell/_buttons.sass 2:3 button-size()
vendor/konekt/appshell/src/resources/assets/sass/appshell/_buttons.sass 2:3 @import
vendor/konekt/appshell/src/resources/assets/sass/appshell.sass 14:9 root stylesheet
at processResult (/opt/a_src/towerify/node_modules/webpack/lib/NormalModule.js:764:19)
at /opt/a_src/towerify/node_modules/webpack/lib/NormalModule.js:866:5
at /opt/a_src/towerify/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at /opt/a_src/towerify/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (/opt/a_src/towerify/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/opt/a_src/towerify/node_modules/sass-loader/dist/index.js:69:5)
My composer.json
file looks like this :
{
"name": "vanilo/demo",
"description": "Vanilo Demo Application",
"keywords": ["vanilo", "laravel", "ecommerce"],
"license": "MIT",
"type": "project",
"minimum-stability": "dev",
"prefer-stable": true,
"require": {
"php": "^8.3",
"ext-gd": "*",
"ext-pcntl": "*",
"guzzlehttp/guzzle": "^7.5",
"laravel/framework": "^11.0",
"laravel/telescope": "^5.0",
"laravel/tinker": "^2.0",
"laravel/ui": "^4.0",
"league/flysystem-aws-s3-v3": "^3.0",
"league/flysystem-path-prefixing": "^3.0",
"phpseclib/phpseclib": "^3.0",
"symfony/process": "^7.0",
"vanilo/admin": "^4.0",
"vanilo/euplatesc": "^4.0",
"vanilo/framework": "^4.0",
"vanilo/mollie": "^2.0",
"vanilo/netopia": "^3.0",
"vanilo/payment": "^4.0"
},
"require-dev": {
"barryvdh/laravel-debugbar": "^3.13",
"spatie/laravel-ignition": "^2.5",
"fakerphp/faker": "^1.23",
"laravel/dusk": "^8.2",
"mockery/mockery": "^1.6",
"phpunit/phpunit": "^11.2"
},
"autoload": {
"classmap": [
"database/seeds",
"database/factories"
],
"psr-4": {
"App\\": "app/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"extra": {
"laravel": {
"dont-discover": [
]
}
},
"scripts": {
"post-root-package-install": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"@php artisan key:generate"
],
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"@php artisan package:discover"
]
},
"config": {
"preferred-install": "dist",
"sort-packages": true,
"optimize-autoloader": true
}
}
Any idea?
Best,
Cyrille
The v4 Admin's frontend has been upgraded to Bootstrap 5.3.
If you have an existing Laravel mix-based installation, run the following commands to upgrade the packages:
npm install bootstrap@5.3
npm install @popperjs/core --save
and then you can run npm run prod
again
Way better thanks!
From my point of view, the only remaining gotchas are in the Admin Panel where the data-toggle
should be replaced by a data-bs-toggle
I believe (according to this).
Those have already been replaced. Do you maybe override the admin views in your application? https://laravel.com/docs/11.x/packages#overriding-package-views
No. I removed the node_modules
and vendor
directories and rebuilt everything. It seems that now everything is working fine!
Thanks for your help.