Related
I am working on a client's project, I have done changes in Vue and scss files, I want to know to can I deploy these changes to the live server.
The live website is on the digital ocean server. and its SSR(server-side rendering is on)
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix && mix --mix-config=webpack.ssr.mix.js",
"watch": "mix watch",
"watch-server": "mix watch --mix-config=webpack.ssr.mix.js",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "mix --production && mix --production --mix-config=webpack.ssr.mix.js",
"production": "mix --production",
"server": "nodemon public/js/ssr.js"
},
"devDependencies": {
"#popperjs/core": "^2.10.2",
"#vue/babel-plugin-jsx": "^1.1.1",
"axios": "^0.21",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"nodemon": "^2.0.15",
"postcss": "^8.1.14",
"resolve-url-loader": "^5.0.0",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue-loader": "^17.0.0"
},
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#duannx/vue-client-only": "^1.0.3",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue3": "^0.6.0",
"#inertiajs/progress": "^0.2.7",
"#inertiajs/server": "^0.1.0",
"#stripe/stripe-js": "^1.23.0",
"#vue/compiler-sfc": "^3.2.31",
"#vue/server-renderer": "^3.2.31",
"#vuepic/vue-datepicker": "^3.1.0",
"algoliasearch": "^4.13.1",
"inertia-title": "^1.0.2",
"jquery": "^3.6.0",
"moment": "^2.29.1",
"nprogress": "^0.2.0",
"slick-carousel": "^1.8.1",
"sprintf-js": "^1.1.2",
"vue": "^3.2.31",
"vue-instantsearch": "^4.3.3",
"vue-slick-carousel": "^1.0.6",
"vue-stripe-js": "^1.0.0",
"vue-timer-hook": "^1.0.0",
"vue-toastification": "^2.0.0-rc.5",
"vue3-autocounter": "^1.0.6",
"vue3-datepicker": "^0.3.2",
"vue3-lazyload": "^0.2.5-beta",
"vue3-select2-component": "^0.1.7",
"vuedraggable": "^4.1.0",
"webpack-node-externals": "^3.0.0"
}
}
I'm having this error while running any of my Laravel Mix Scripts. There is no description of the error. It's just showing this. I also tried by removing the node_modules folder, removing package-lock.json and by running npm run cache clean --force but no luck
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ota#3.1.0 development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ota#3.1.0 development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nabee\AppData\Roaming\npm-cache\_logs\2021-06-02T19_05_57_921Z-debug.log
Process finished with exit code 1
My package.json file is:
{
"private": true,
"name": "ota",
"version": "3.1.0",
"description": "OTA",
"author": "mnb",
"browserslist": [
"last 2 version",
"> 2%"
],
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production"
},
"devDependencies": {
"#popperjs/core": "^2.9.2",
"axios": "^0.21",
"laravel-mix": "^6.0.19",
"lodash": "^4.17.21",
"popper.js": "^1.12",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.0",
"rtlcss": "^3.2.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"xxxxx": "^1.0.3"
},
"dependencies": {
"#chenfengyuan/datepicker": "^1.0.9",
"#curiosityx/bootstrap-session-timeout": "^1.0.0",
"admin-resources": "git+https://github.com/themesbrand/admin-resources.git#master",
"apexcharts": "^3.26.3",
"bootstrap": "^5.0.0-beta2",
"bootstrap-datepicker": "^1.9.0",
"bootstrap-editable": "^1.0.1",
"bootstrap-filestyle2": "^2.1.0",
"bootstrap-maxlength": "^1.6.0",
"bootstrap-rating": "0.0.1",
"bootstrap-timepicker": "^0.5.2",
"bootstrap-touchspin": "^4.2.5",
"chance": "^1.1.3",
"chart.js": "^2.9.4",
"datatables.net": "^1.10.23",
"datatables.net-autofill": "^2.3.4",
"datatables.net-autofill-bs4": "^2.3.4",
"datatables.net-bs4": "^1.10.20",
"datatables.net-buttons": "^1.4.2",
"datatables.net-buttons-bs4": "^1.4.2",
"datatables.net-keytable": "^2.3.2",
"datatables.net-keytable-bs4": "^2.3.2",
"datatables.net-responsive": "^2.2.1",
"datatables.net-responsive-bs4": "^2.2.1",
"datatables.net-select": "^1.2.5",
"datatables.net-select-bs4": "^1.2.5",
"dragula": "^3.7.2",
"dropzone": "^5.7.2",
"echarts": "^4.7.0",
"flot-charts": "^0.8.3",
"flot.curvedlines": "^1.1.1",
"gmaps": "^0.4.24",
"gulp-rtlcss": "^1.4.1",
"inputmask": "^4.0.9",
"ion-rangeslider": "^2.3.0",
"jquery": "^3.5.1",
"jquery-countdown": "^2.2.0",
"jquery-knob": "^1.2.11",
"jquery-sparkline": "^2.4.0",
"jquery-steps": "^1.1.0",
"jquery-validation": "^1.19.3",
"jquery.easing": "^1.4.1",
"jquery.flot.tooltip": "^0.9.0",
"jquery.repeater": "^1.2.1",
"jszip": "^3.2.2",
"leaflet": "^1.6.0",
"magnific-popup": "^1.1.0",
"masonry-layout": "^4.2.2",
"metismenu": "^3.0.4",
"moment": "^2.29.1",
"node-waves": "^0.7.6",
"npm-install-peers": "^1.2.2",
"owl.carousel": "^2.3.4",
"parsleyjs": "^2.9.1",
"pdfmake": "^0.1.65",
"select2": "^4.0.10",
"simplebar": "^4.2.3",
"spectrum-colorpicker2": "^2.0.5",
"sweetalert2": "^10.10.4",
"table-edits": "^0.0.3",
"tinymce": "^5.0.16",
"toastr": "^2.1.4",
"tui-calendar": "^1.12.5",
"tui-chart": "^3.8.0",
"tui-date-picker": "^4.0.2",
"tui-dom": "^3.0.0",
"tui-time-picker": "^2.0.2",
"webpack": "^5.38.1",
"webpack-rtl-plugin": "^2.0.0"
}
}
Please help me out. I've spent hours trying to resolve this issue with no luck at all
You have a lot of outdated packages. Perhaps try upgrading them and see if the error persists or not. For example, update your package.json to the following and then run npm install.
{
"private": true,
"name": "ota",
"version": "3.1.0",
"description": "OTA",
"author": "mnb",
"browserslist": [
"last 2 version",
"> 2%"
],
"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": {
"#chenfengyuan/datepicker": "^1.0.10",
"#curiosityx/bootstrap-session-timeout": "^1.0.0",
"#popperjs/core": "^2.9.2",
"admin-resources": "git+https://github.com/themesbrand/admin-resources.git#master",
"apexcharts": "^3.27.2",
"axios": "^0.21",
"bootstrap": "^5.0.2",
"bootstrap-datepicker": "^1.9.0",
"bootstrap-editable": "^1.0.1",
"bootstrap-filestyle2": "^2.1.0",
"bootstrap-maxlength": "^1.10.1",
"bootstrap-rating": "0.0.1",
"bootstrap-timepicker": "^0.5.2",
"bootstrap-touchspin": "^4.3.0",
"chance": "^1.1.7",
"chart.js": "^3.4.1",
"datatables.net": "^1.10.25",
"datatables.net-autofill": "^2.3.9",
"datatables.net-autofill-bs4": "^2.3.9",
"datatables.net-bs4": "^1.10.25",
"datatables.net-buttons": "^1.7.1",
"datatables.net-buttons-bs4": "^1.7.1",
"datatables.net-keytable": "^2.6.2",
"datatables.net-keytable-bs4": "^2.6.2",
"datatables.net-responsive": "^2.2.9",
"datatables.net-responsive-bs4": "^2.2.9",
"datatables.net-select": "^1.3.3",
"datatables.net-select-bs4": "^1.3.3",
"dragula": "^3.7.3",
"dropzone": "^5.9.2",
"echarts": "^5.1.2",
"flot-charts": "^0.8.3",
"flot.curvedlines": "^1.1.1",
"gmaps": "^0.4.25",
"gulp-rtlcss": "^1.4.2",
"inputmask": "^5.0.6",
"ion-rangeslider": "^2.3.1",
"jquery": "^3.6.0",
"jquery-countdown": "^2.2.0",
"jquery-knob": "^1.2.11",
"jquery-sparkline": "^2.4.0",
"jquery-steps": "^1.1.0",
"jquery-validation": "^1.19.3",
"jquery.easing": "^1.4.1",
"jquery.flot.tooltip": "^0.9.0",
"jquery.repeater": "^1.2.1",
"jszip": "^3.6.0",
"laravel-mix": "^6.0.25",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"magnific-popup": "^1.1.0",
"masonry-layout": "^4.2.2",
"metismenu": "^3.0.7",
"moment": "^2.29.1",
"node-waves": "^0.7.6",
"npm-install-peers": "^1.2.2",
"owl.carousel": "^2.3.4",
"parsleyjs": "^2.9.2",
"pdfmake": "^0.2.0",
"popper.js": "^1.12",
"postcss": "^8.3.5",
"resolve-url-loader": "^4.0.0",
"rtlcss": "^3.3.0",
"sass": "^1.35.2",
"sass-loader": "^12.1.0",
"select2": "^4.0.13",
"simplebar": "^5.3.5",
"spectrum-colorpicker2": "^2.0.8",
"sweetalert2": "^11.0.19",
"table-edits": "^0.0.3",
"tinymce": "^5.8.2",
"toastr": "^2.1.4",
"tui-calendar": "^1.13.1",
"tui-chart": "^3.11.3",
"tui-date-picker": "^4.2.2",
"tui-dom": "^3.0.0",
"tui-time-picker": "^2.1.2",
"webpack": "^5.45.1",
"webpack-rtl-plugin": "^2.0.0",
"xxxxx": "^1.0.3"
}
}
About a day or 2 ago, I ran my NPM build, but it suddenly gave the error that the polyfill is not provided by default anymore with Webpack 5. I was able to fix a lot of the errors, but it keeps failing.
I get the following errors:
These are just a few of them.
I'm using laravel-mix#6.0.13 in this build with the following webpack.mix.js file:
const mix = require('laravel-mix');
require('mix-tailwindcss');
mix.webpackConfig({
resolve: {
fallback: {
fs: require.resolve('browserify-fs'),
path: require.resolve("path-browserify"),
"crypto": require.resolve("crypto-browserify"),
"https": require.resolve("https-browserify"),
"http": require.resolve("stream-http"),
"vm": require.resolve("vm-browserify"),
"os": require.resolve("os-browserify/browser"),
"stream": require.resolve("stream-browserify"),
"constants": require.resolve("constants-browserify"),
}
}
})
mix.options({ legacyNodePolyfills: false });
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/scss/app.scss', 'public/css')
.tailwind('./tailwind.config.js')
mix.sass('resources/scss/admin.scss', 'public/css')
My packages.json:
{
"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.18",
"bootstrap": "^4.0.0",
"browserify-fs": "^1.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^6.0.13",
"lodash": "^4.17.4",
"mix-tailwindcss": "^1.3.0",
"popper.js": "^1.12",
"postcss": "^8.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.12",
"sass-loader": "10.*",
"tailwindcss": "^2.1.2",
"vue": "^2.5.7",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"buefy": "^0.9.6",
"jquery": "^3.6.0",
"mix-tailwindcss": "^1.3.0",
"query-string": "^7.0.0",
"slick-carousel": "^1.8.1",
"vue": "^2.6.12",
"vue-it-bigger": "^0.2.2"
}
}
Does someone know how to fix this?
Solved it!
I added the the NodePolyfillPlugin plugin to my webpack config. I added browserify-fs to resolve.fallback.fs like this.
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
mix.webpackConfig({
plugins: [
new NodePolyfillPlugin(),
],
resolve: {
fallback: {
fs: require.resolve('browserify-fs'),
}
}
})
After this the build kept failing, i finally figured out that for some reason i had import {vue} from 'laravel-mix' in my app.js . this was giving als the errors. After removing this it ran succesfully!
I'm building this Vue app with Visual Studio and regardless of the build mode (debug/release) I still get this message below in the console.
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
Is there a way to know if I'm really in release mode or if Vue is just throwing me that message?
I know that usually it means the JS files have been minified, is that the case with a Vue app?
I'm not sure if this helps but here is my packages.json file
{
"name": "aspnetcore-vuejs",
"description": "ASP.NET Core & VueJS Starter project",
"author": "Mark Pieszak",
"scripts": {
"dev": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"install": "webpack --config webpack.config.vendor.js"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/vue-fontawesome": "^0.1.1",
"axios": "^0.15.3",
"bootstrap-vue": "^2.0.0-rc.11",
"core-js": "^2.4.1",
"dayjs": "^1.7.5",
"font-awesome": "^4.6.3",
"material-design-icons-iconfont": "^3.0.3",
"vue": "^2.1.8",
"vue-infinite-loading": "^2.3.3",
"vue-masked-input": "^0.5.2",
"vue-router": "^2.1.1",
"vue-select": "^2.5.0",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.1.8",
"vuetify": "^1.2.3",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"bootstrap": "^4.1.3",
"cross-env": "^3.1.3",
"css-loader": "^0.26.1",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"node-sass": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"regenerator-runtime": "^0.12.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.2",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}
}
As the Vue.js deployment guide you posted suggests, please check your webpack.config.js and be sure to use the right mode targetting production environment when you deploy the app.
In Webpack 4+, you can do:
module.exports = {
mode: 'production'
}
But in Webpack 3 and earlier, you'll need to use DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
When you are ready, you should simply need to run npm run build to start bundling your modules.
Related and useful readings:
Writing separate Webpack configurations for each environment.
Managing development and production builds with Webpack.
Introduction to NPM Scripts.
I need to not allow tslint to fix found errors. For example, if it found comma missing, I need it to only tell me that it found it, and not actually fix it.
I found the "--no-fix" parameter in its vue-cli documentation, but it doesn't look like it is working. (I'm using npm run lint, where "lint": "vue-cli-service lint --no-fix" in package.json)
Are there any other ways to stop tslint's automatic fixes?
The "--no-fix" option works for me. Below is my configuration, please check your lint version:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint --no-fix",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"#riophae/vue-treeselect": "0.0.37",
"axios": "^0.18.0",
"bootstrap-vue": "^2.0.0-rc.11",
"izitoast": "^1.4.0",
"moment": "^2.22.2",
"v-calendar": "^0.9.7",
"v-select2-component": "^0.3.1",
"vue": "^2.5.17",
"vue-full-calendar": "^2.7.0",
"vue-izitoast": "^1.1.2",
"vue-js-modal": "^1.3.27",
"vue-router": "^3.0.1",
"vue2-daterange-picker": "^0.1.5",
"vuejs-datepicker": "^1.5.4",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.1.1",
"#vue/cli-plugin-eslint": "^3.1.5",
"#vue/cli-plugin-unit-jest": "^3.1.1",
"#vue/cli-service": "^3.1.4",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.20",
"ajv": "^6.5.5",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.8.0",
"eslint-plugin-cypress": "^2.1.3",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
}
}