Level 29
Open the file package.json, you need to update the scripts.
Aug 3, 2021
15
Level 8
Error when start -> npm run watch ?
Hi!
This error drives me crazy....
When i run -> npm run watch i get this error from terminal:
webpack-cli] Error: Unknown option '--hide-modules'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ 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! /Users/torerikberg/.npm/_logs/2021-08-03T10_17_41_460Z-debug.log
My logg
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'watch' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prewatch', 'watch', 'postwatch' ]
5 info lifecycle @~prewatch: @
6 info lifecycle @~watch: @
7 verbose lifecycle @~watch: unsafe-perm in lifecycle true
8 verbose lifecycle @~watch: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/torerikberg/projects/code/portal/node_modules/.bin:/usr/local/opt/[email protected]/sbin:/usr/local/opt/[email protected]/bin:/usr/local/opt/[email protected]/sbin:/usr/local/opt/[email protected]/bin:/usr/local/opt/[email protected]/sbin:/usr/local/opt/[email protected]/bin:/usr/local/opt/[email protected]/bin:/usr/local/opt/[email protected]/sbin:/usr/local/opt/[email protected]/bin:/Users/torerikberg/Downloads/google-cloud-sdk/bin:/Users/torerikberg/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:~/.dotnet/tools:/Library/Frameworks/Mono.framework/Versions/Current/Commands
9 verbose lifecycle @~watch: CWD: /Users/torerikberg/projects/code/portal
10 silly lifecycle @~watch: Args: [ '-c', 'npm run development -- --watch' ]
11 silly lifecycle @~watch: Returned: code: 2 signal: null
12 info lifecycle @~watch: Failed to exec watch script
13 verbose stack Error: @ watch: `npm run development -- --watch`
13 verbose stack Exit status 2
13 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1048:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid @
15 verbose cwd /Users/torerikberg/projects/code/portal
16 verbose Darwin 17.7.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "watch"
18 verbose node v14.15.4
19 verbose npm v6.14.10
20 error code ELIFECYCLE
21 error errno 2
22 error @ watch: `npm run development -- --watch`
22 error Exit status 2
23 error Failed at the @ watch script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]
Have tryed many things, but no luck ???
Level 8
Hi!
First i have this script:
{
"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": "npm run development -- --watch",
"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": {
"@casl/ability": "^4.1.5",
"@casl/vue": "^1.1.1",
"@laraveldaily/vue2-datatable": "^2.3.2",
"axios": "^0.19",
"cross-env": "^7.0.2",
"laravel-mix": "^5.0.4",
"lodash": "^4.17.13",
"object-to-formdata": "^3.0.9",
"resolve-url-loader": "^3.1.2",
"sass": "^1.28.0",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-clickaway": "^2.2.2",
"vue-router": "^3.3.4",
"vue-select": "^3.10.7",
"vue-sweetalert2": "^3.0.6",
"vue-template-compiler": "^2.6.10",
"vuex": "^3.5.1",
"vue-i18n": "^8.22.0",
"chart.js": "^2.9.4",
"vue-chartjs": "^3.5.1",
"@ckeditor/ckeditor5-vue": "^1.0.1",
"vue2-dropzone": "^3.6.0",
"@ckeditor/ckeditor5-build-classic": "^21.0.0"
}
}
Update my script to this:
{
"private": true,
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production"
},
"devDependencies": {
"@casl/ability": "^4.1.5",
"@casl/vue": "^1.1.1",
"@laraveldaily/vue2-datatable": "^2.3.2",
"axios": "^0.19",
"cross-env": "^7.0.2",
"laravel-mix": "^5.0.4",
"lodash": "^4.17.13",
"object-to-formdata": "^3.0.9",
"resolve-url-loader": "^3.1.2",
"sass": "^1.28.0",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-clickaway": "^2.2.2",
"vue-router": "^3.3.4",
"vue-select": "^3.10.7",
"vue-sweetalert2": "^3.0.6",
"vue-template-compiler": "^2.6.10",
"vuex": "^3.5.1",
"vue-i18n": "^8.22.0",
"chart.js": "^2.9.4",
"vue-chartjs": "^3.5.1",
"@ckeditor/ckeditor5-vue": "^1.0.1",
"vue2-dropzone": "^3.6.0",
"@ckeditor/ckeditor5-build-classic": "^21.0.0"
}
}
In my terminal, after command: npn run watch i get errors like:
ARNING in ./resources/adminapp/js/i18n.js 3:8-15
export 'default' (imported as 'VueI18n') was not found in 'vue-i18n' (possible exports: DatetimeFormat, NumberFormat, Translation, VERSION, createI18n, useI18n, vTDirective)
WARNING in ./resources/adminapp/js/i18n.js 4:19-26
export 'default' (imported as 'VueI18n') was not found in 'vue-i18n' (possible exports: DatetimeFormat, NumberFormat, Translation, VERSION, createI18n, useI18n, vTDirective)
WARNING in ./node_modules/vue-i18n/dist/vue-i18n.esm-bundler.js 91:36-54
export 'getCurrentInstance' (imported as 'getCurrentInstance') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-i18n/dist/vue-i18n.esm-bundler.js 148:21-39
export 'getCurrentInstance' (imported as 'getCurrentInstance') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-i18n/dist/vue-i18n.esm-bundler.js 164:20-23
export 'ref' (imported as 'ref') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-i18n/dist/vue-i18n.esm-bundler.js 171:28-31
export 'ref' (imported as 'ref') was not found in 'vue' (possible exports: default)
e.t.c
Level 29
show us your webpack and app.js
Level 8
Hi!
Webpack.mix.js
const mix = require('laravel-mix')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
output: { chunkFilename: 'adminapp/js/chunks/[name].js?id=[chunkhash]' },
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': __dirname + '/resources/adminapp/js',
'@pages': __dirname + '/resources/adminapp/js/pages',
'@components': __dirname + '/resources/adminapp/js/components',
'@cruds': __dirname + '/resources/adminapp/js/cruds'
}
}
})
// Admin App
mix
.js('resources/adminapp/js/app.js', 'public/adminapp/js')
.sass('resources/adminapp/sass/app.scss', 'public/adminapp/css')
if (mix.inProduction()) {
mix.version()
}
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap')
window.Vue = require('vue')
window.moment.updateLocale('en', { week: { dow: 1 } })
Vue.config.productionTip = false
Vue.prototype.$jquery = $
import App from './App.vue'
// Core
import router from './routes/routes'
import store from './store/store'
import i18n from './i18n'
// Plugins
import GlobalComponents from './globalComponents'
import GlobalDirectives from './globalDirectives'
import GlobalMixins from './mixins/global'
import { mapGetters, mapActions } from 'vuex'
Vue.use(GlobalComponents)
Vue.use(GlobalDirectives)
Vue.use(GlobalMixins)
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
render: h => h(App),
router,
store,
i18n,
created() {
this.fetchLanguages()
},
methods: {
...mapActions('I18NStore', ['fetchLanguages'])
}
})
Level 29
The file I mentioned is resourece/js/app.js, or the file you do the vue configuration
Something like this
import Vue from 'vue'
new Vue()
Level 29
Also please refer this to update your webpack and app.js
webpack
mix
.js('resources/adminapp/js/app.js', 'public/adminapp/js').vue()
.sass('resources/adminapp/sass/app.scss', 'public/adminapp/css')
Level 8
Hi!
Replaced this
.js('resources/adminapp/js/app.js', 'public/adminapp/js').vue() .sass('resources/adminapp/sass/app.scss', 'public/adminapp/css')
But no luck
Error in terminal now:
npm ERR! @ watch: `mix watch`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ watch 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! /Users/torerikberg/.npm/_logs/2021-08-04T05_18_30_839Z-debug.log
From log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'watch' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prewatch', 'watch', 'postwatch' ]
5 info lifecycle @~prewatch: @
6 info lifecycle @~watch: @
7 verbose lifecycle @~watch: unsafe-perm in lifecycle true
8 verbose lifecycle @~watch: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/torerikberg/projects/code/portal/node_modules/.bin:/usr/local/opt/[email protected]/sbin:/usr/local/opt/[email protected]/bin:/usr/local/opt/[email protected]/sbin:/usr/local/opt/[email protected]/bin:/usr/local/opt/[email protected]/sbin:/usr/local/opt/[email protected]/bin:/usr/local/opt/[email protected]/bin:/usr/local/opt/[email protected]/sbin:/usr/local/opt/[email protected]/bin:/Users/torerikberg/Downloads/google-cloud-sdk/bin:/Users/torerikberg/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:~/.dotnet/tools:/Library/Frameworks/Mono.framework/Versions/Current/Commands
9 verbose lifecycle @~watch: CWD: /Users/torerikberg/projects/code/portal
10 silly lifecycle @~watch: Args: [ '-c', 'mix watch' ]
11 info lifecycle @~watch: Failed to exec watch script
12 verbose stack Error: @ watch: `mix watch`
12 verbose stack spawn ENOENT
12 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack at ChildProcess.emit (events.js:315:20)
12 verbose stack at maybeClose (internal/child_process.js:1048:16)
12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
13 verbose pkgid @
14 verbose cwd /Users/torerikberg/projects/code/portal
15 verbose Darwin 17.7.0
16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "watch"
17 verbose node v14.15.4
18 verbose npm v6.14.10
19 error code ELIFECYCLE
20 error syscall spawn
21 error file sh
22 error errno ENOENT
23 error @ watch: `mix watch`
23 error spawn ENOENT
24 error Failed at the @ watch script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]
Level 29
Try this, make sure the packages are up to date and compatible with the current node version.
https://github.com/JeffreyWay/laravel-mix/issues/1072#issuecomment-319401164
Level 8
Hi!
Have tryed many things, but strugle to get this to work :(
When i now try this:
npm run dev
i get this error message
npm ERR! missing script: dev
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/torerikberg/.npm/_logs/2021-08-06T11_30_45_249Z-debug.log
Loggfile
info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: dev
4 verbose stack at run (/usr/local/lib/node_modules/npm/lib/run-script.js:155:19)
4 verbose stack at /usr/local/lib/node_modules/npm/lib/run-script.js:63:5
4 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:116:5
4 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:436:5
4 verbose stack at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:391:45)
4 verbose stack at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:434:3)
4 verbose stack at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:161:5)
4 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:382:12
4 verbose stack at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:123:16
4 verbose stack at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
5 verbose cwd /Users/torerikberg/projects/code/portal
6 verbose Darwin 17.7.0
7 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
8 verbose node v14.15.4
9 verbose npm v6.14.10
10 error missing script: dev
11 verbose exit [ 1, true ]
Level 29
npm ERR! missing script: dev
Check your package.json, the dev is removed. if you want to use your preference command, add it to the scripts
"scripts": {
"dev": "mix", //here
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production",
},
Level 8
Hi!
Please show how ?
Thank you
Level 29
Please show how?
What do you mean? I have shown it.
Level 8
Hi!
My mistake, trying this now:
"scripts": {
"dev": "mix", //here
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production",
},
In the terminal i get this:
> @ dev /Users/torerikberg/projects/code/portal
> mix
Additional dependencies must be installed. This will only take a moment.
Running: yarn add vue-loader@^15.9.7 --dev
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
warning [email protected]: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
warning laravel-mix > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning laravel-mix > webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning laravel-mix > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning laravel-mix > webpack-dev-server > webpack-log > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning laravel-mix > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning " > [email protected]" has unmet peer dependency "css-loader@*".
warning " > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
error An unexpected error occurred: "EACCES: permission denied, mkdir '/Users/torerikberg/projects/code/portal/node_modules/babel-loader/node_modules/schema-utils'".
[webpack-cli] Error: Command failed: yarn add vue-loader@^15.9.7 --dev
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
warning [email protected]: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
warning laravel-mix > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning laravel-mix > webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning laravel-mix > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning laravel-mix > webpack-dev-server > webpack-log > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning laravel-mix > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning " > [email protected]" has unmet peer dependency "css-loader@*".
warning " > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
error An unexpected error occurred: "EACCES: permission denied, mkdir '/Users/torerikberg/projects/code/portal/node_modules/babel-loader/node_modules/schema-utils'".
at checkExecSyncError (child_process.js:760:11)
at Object.execSync (child_process.js:833:15)
at Dependencies.execute (/Users/torerikberg/projects/code/portal/node_modules/laravel-mix/src/Dependencies.js:84:22)
at Dependencies.install (/Users/torerikberg/projects/code/portal/node_modules/laravel-mix/src/Dependencies.js:68:14)
at Function.installQueued (/Users/torerikberg/projects/code/portal/node_modules/laravel-mix/src/Dependencies.js:51:53)
at Mix.installDependencies (/Users/torerikberg/projects/code/portal/node_modules/laravel-mix/src/Mix.js:119:22)
at async module.exports (/Users/torerikberg/projects/code/portal/node_modules/laravel-mix/setup/webpack.config.js:10:5)
at async /Users/torerikberg/projects/code/portal/node_modules/webpack-cli/lib/webpack-cli.js:1565:37
at async Promise.all (index 0)
at async evaluateConfig (/Users/torerikberg/projects/code/portal/node_modules/webpack-cli/lib/webpack-cli.js:1556:37) {
status: 1,
signal: null,
output: [
null,
<Buffer 79 61 72 6e 20 61 64 64 20 76 31 2e 32 32 2e 31 30 0a 5b 31 2f 34 5d 20 52 65 73 6f 6c 76 69 6e 67 20 70 61 63 6b 61 67 65 73 2e 2e 2e 0a 5b 32 2f 34 ... 287 more bytes>,
<Buffer 77 61 72 6e 69 6e 67 20 70 61 63 6b 61 67 65 2d 6c 6f 63 6b 2e 6a 73 6f 6e 20 66 6f 75 6e 64 2e 20 59 6f 75 72 20 70 72 6f 6a 65 63 74 20 63 6f 6e 74 ... 1626 more bytes>
],
pid: 1133,
stdout: <Buffer 79 61 72 6e 20 61 64 64 20 76 31 2e 32 32 2e 31 30 0a 5b 31 2f 34 5d 20 52 65 73 6f 6c 76 69 6e 67 20 70 61 63 6b 61 67 65 73 2e 2e 2e 0a 5b 32 2f 34 ... 287 more bytes>,
stderr: <Buffer 77 61 72 6e 69 6e 67 20 70 61 63 6b 61 67 65 2d 6c 6f 63 6b 2e 6a 73 6f 6e 20 66 6f 75 6e 64 2e 20 59 6f 75 72 20 70 72 6f 6a 65 63 74 20 63 6f 6e 74 ... 1626 more bytes>
}
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `mix`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev 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! /Users/torerikberg/.npm/_logs/2021-08-07T05_23_23_621Z-debug.log
Level 29
The errors are pretty clear.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[email protected]: Chokidar 2 will break on node v14+.
Please make sure the packages are up to date and compatible with the current node version.
Also, to do the full reset:
rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install
Level 8
Hi frankielee!
Tryed many things, but strogle to get this to work. After many hours of trying different things, i finally get this working again.
Thank you frankielee for ALL help.
Please or to participate in this conversation.