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"
}
}
Related
I'm not able to see what's the problem here.
Compiling with npm run watch I get the below error.
I try differents things nothing, no clue where the error coming from
Error in the Console
> survey-front.js:126297 Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
at Module.default (survey-front.js:126297:42)
at Module../resources/js/router.js (RecordRTC.js:700:1)
at __webpack_require__ (survey-front.js:141859:42)
file survey-front.js
import Vue from 'vue'
Vue.component('survey-show', require('./components/SurveyShow.vue').default)
Vue.component('survey-language', require('./components/SurveySetLanguage.vue').default)
new Vue({
el: "#surveyElement"
})
package.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.21.1",
"bootstrap": "^4.6.0",
"browser-sync": "^2.27.9",
"cross-env": "^7.0.3",
"jquery": "^3.2",
"laravel-mix": "^6.0.43",
"lodash": "^4.17.21",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^8.0.0",
"survey-knockout": "^1.9.26",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
},
"dependencies": {
"inputmask": "^5.0.5",
"survey-vue": "^1.9.26",
"surveyjs-widgets": "^1.9.26",
"vue-router": "^3.5.1",
"vuetify": "^1.0.18"
}
}
I have been trying to compile Webpack with laravel-mix, laravel-mix-purgecss, and laravel-mix-criticalcss. But I have been facing issues compiling it with laravel-mix-criticalcss. If I comment the criticalcss in webpack.mix.js, it works fine, but with criticalcss it throws an error. I have upgraded npm and all packages, but whenever I try to compile webpack, it throws this error:
[webpack-cli] TypeError:
mix.js(...).options(...).postCss(...).options(...).sass(...).sass(...).criticalCss
is not a function
I have included laravel-mix-criticalcss in webpack.mix.js
require('laravel-mix-criticalcss');
package.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"
},
"dependencies": {
"intersection-observer": "^0.12.0",
"laravel-vue-pagination": "^3.0.0",
"sass-migrator": "^1.5.4",
"v-lazy-image": "^2.1.1",
"vanilla-lazyload": "^17.6.1",
"vue-clickaway": "^2.2.2",
"vue-slider-component": "^3.2.15",
"vue-sweetalert2": "^5.0.2",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"autoprefixer": "^10.4.4",
"axios": "^0.26.1",
"bootstrap": "^4.6.0",
"bs-custom-file-input": "^1.3.4",
"cross-env": "^7.0.3",
"jquery": "^3.6.0",
"laravel-mix": "^6.0.43",
"laravel-mix-criticalcss": "^0.1.0",
"laravel-mix-purgecss": "^6.0.0",
"laravel-mix-workbox": "^0.1.4",
"livewire-sortable": "^0.2.2",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"postcss": "^8.4.12",
"resolve-url-loader": "^5.0.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"tailwindcss": "^3.0.23",
"vue": "^3.2.31",
"vue-template-compiler": "^2.6.14",
"workbox-webpack-plugin": "^6.5.1"
}
}
Try using a new version of Laravel Mix Critical.
npm i laravel-mix-criticalcss#latest --save-dev
Or use this package.json and do npm install.
{
"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"
},
"dependencies": {
"intersection-observer": "^0.12.0",
"laravel-vue-pagination": "^3.0.0",
"sass-migrator": "^1.5.4",
"v-lazy-image": "^2.1.1",
"vanilla-lazyload": "^17.6.1",
"vue-slider-component": "^3.2.15",
"vue-sweetalert2": "^5.0.2",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"autoprefixer": "^10.4.4",
"axios": "^0.26.1",
"bootstrap": "^4.6.0",
"bs-custom-file-input": "^1.3.4",
"cross-env": "^7.0.3",
"jquery": "^3.6.0",
"laravel-mix": "^6.0.43",
"laravel-mix-criticalcss": "^1.0.2",
"laravel-mix-purgecss": "^6.0.0",
"laravel-mix-workbox": "^0.1.4",
"livewire-sortable": "^0.2.2",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"postcss": "^8.4.12",
"resolve-url-loader": "^5.0.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"tailwindcss": "^3.0.23",
"vue": "^3.2.31",
"vue-template-compiler": "^2.6.14",
"workbox-webpack-plugin": "^6.5.1"
}
}
I recently updated my repositories, and now I'm having these issues every time I build.
I already tried to go back to the previous point, but still the same. I found a problem with the style sheet. I use Tailwind, and when I import a sheet inside app.css if this sheet has these classes:
transform -translate-x-1/2 translate-y-1/2 can't compile
I took those classes out and put them in app.css, but when I use npm run watch, it compiles the first time, but if I do another modification, I have to save app.css again to compile correctly.
ERROR in ./resources/css/app.css
(./node_modules/css-loader/dist/cjs.js??clonedRuleSet-6.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./resources/css/app.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Problem with Vue building Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js)
package.json
{
"private": true,
"scripts": {
"lint": "eslint --ext .js,.vue resources/js/",
"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": {
"#types/sanitize-html": "^2.3.2",
"#vue/compiler-sfc": "^3.1.4",
"autoprefixer": "^10.4.0",
"axios": "^0.21",
"cssnano": "^5.0.7",
"eslint": "^7.31.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier-vue": "^3.1.0",
"eslint-plugin-vue": "^7.14.0",
"laravel-mix": "^6.0.42",
"lodash": "^4.17.19",
"mini-css-extract-plugin": "^1.6.2",
"postcss": "^8.4.5",
"postcss-import": "^14.0.2",
"postcss-loader": "^6.2.1",
"prettier": "^2.3.2",
"tailwindcss": "^3.0.23",
"vue-loader": "^16.3.0"
},
"dependencies": {
"#chenfengyuan/vue-barcode": "^2.0.0-beta",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^3.0.0-4",
"ag-grid-community": "^25.3.0",
"ag-grid-vue3": "^25.3.1",
"click-outside-vue3": "^4.0.1",
"dayjs": "^1.10.7",
"jsbarcode": "^3.11.4",
"laravel-echo": "^1.11.3",
"mini-css-extract-plugin": "^2.5.3",
"pusher-js": "^7.0.6",
"peru-ubigeo": "^0.0.3",
"qrcode.vue": "^3.2.2",
"quagga": "^0.12.1",
"twitter-widgets": "^2.0.0",
"vue": "^3.1.5",
"vue-3-sanitize": "^0.1.3",
"vue-class-component": "^8.0.0-rc.1",
"vue-cookie-next": "^1.0.3",
"vue-currency-input": "^2.0.0",
"vue-debounce": "^3.0.1",
"vue-router": "^4.0.12",
"vue-upload-drop-images": "^1.0.7",
"vue2-datepicker": "^4.0.0-beta.2",
"vuex": "^4.0.2"
}
I use Vue 3 and Laravel 8
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"
}
}
npm run build error!
I try all solutions for this problem but still not able to solve this. Many times i reinstall npm but not get proper solution (Laravel 8 and Vue js) enter image description here
My package.json Code
{
"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",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"devDependencies": {
"#webpack-cli/init": "^1.1.3",
"axios": "^0.21.1",
"babel-loader": "^8.2.2",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.13",
"lodash": "^4.17.21",
"popper.js": "^1.12",
"postcss": "^8.2.8",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.28.0",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"vue": "^2.6.12",
"vue-router": "^3.5.1"
}
}
I created a src folder(inside root) with a blank main.js file and it worked for me: reference is here