1

I inherited a Laravel project that uses Vue.js as the front end. However, I can't seem to get things to work.

Here are the commands I executed:

john@mail:~/$ cd ~/html/app
john@mail:~/html/app$ composer install
john@mail:~/html/app$ php artisan migrate ---> at this point the website is viewable, so i guess all the npm resources were already compiled with the project
john@mail:~/html/app$ npm install
john@mail:~/html/app$ npm run watch

But the last command yielded the results below.

@ watch /var/www/html/app cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

10% building modules 1/1 modules 0 active Webpack is watching the files… 95% emitting ERROR Failed to compile with 14 errors
7:16:18 PM

This dependency was not found:

  • /var/www/html/app/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

To install it, you can run: npm install --save /var/www/html/app/resources/assets/sass/app.scss

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.17",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1.3",
        "jquery": "^3.2",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "node-sass": "^6.0.1",
        "sass": "^1.35.1",
        "sass-loader": "^12.1.0",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "foundation": "^4.2.1-1",
        "jquery-ui": "^1.12.1",
        "lang.js": "^1.1.14",
        "slick-carousel": "^1.8.1"
    }
}

Any ideas how I can resolve this issue? To me, the instruction to npm install --save /var/www/html/app/resources/assets/sass/app.scss doesn't seem right.

1 Answer 1

1

You have eight outdated packages in your package.json. You may want to start there and see what errors if any, come next.

 axios             ^0.17  →     ^0.21     
 bootstrap-sass   ^3.3.7  →    ^3.4.1     
 cross-env        ^5.1.3  →    ^7.0.3     
 jquery             ^3.2  →      ^3.6     
 laravel-mix        ^1.0  →      ^6.0     
 lodash          ^4.17.4  →  ^4.17.21     
 sass            ^1.35.1  →   ^1.35.2     
 vue              ^2.5.7  →   ^2.6.14  

Update your package.json with the following and then run npm run prod.

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap-sass": "^3.4.1",
        "cross-env": "^7.0.3",
        "foundation": "^4.2.1-1",
        "jquery": "^3.6",
        "jquery-ui": "^1.12.1",
        "lang.js": "^1.1.14",
        "laravel-mix": "^6.0",
        "lodash": "^4.17.21",
        "node-sass": "^6.0.1",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.35.2",
        "sass-loader": "^12.1.0",
        "slick-carousel": "^1.8.1",
        "vue": "^2.6.14"
    }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.