[BUG]Required .../MediaManager/js/manager.js kills npm run dev

[jasperf]

What version of Laravel are you using? (nothing lower than v6).

Laravel 7

is it an issue related to installation or usage ?

Installation

what is the error you are getting ?

We can no longer build our setup using npm run dev and get no feedback in logs of use really:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/jasper/.nvm/versions/node/v14.13.0/bin/node',
1 verbose cli   '/Users/jasper/.nvm/versions/node/v14.13.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'dev'
1 verbose cli ]
2 info using npm@6.14.8
3 info using node@v14.13.0
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @~predev: @
6 info lifecycle @~dev: @
7 verbose lifecycle @~dev: unsafe-perm in lifecycle true
8 verbose lifecycle @~dev: PATH: /Users/jasper/.nvm/versions/node/v14.13.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/jasper/code/domain.com/valet/node_modules/.bin:/Users/jasper/.nvm/versions/node/v14.13.0/bin:/Users/jasper/.nvm/versions/node/v9.8.0/bin:/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Library/Apple/usr/bin:/Users/jasper/.nvm/versions/node/v9.8.0/bin:/usr/local/sbin:/Users/jasper/.composer/vendor/bin:/Users/jasper/.composer/vendor/bin
9 verbose lifecycle @~dev: CWD: /Users/jasper/code/domain.com/valet
10 silly lifecycle @~dev: Args: [ '-c', 'npm run development' ]
11 silly lifecycle @~dev: Returned: code: 2  signal: null
12 info lifecycle @~dev: Failed to exec dev script
13 verbose stack Error: @ dev: `npm run development`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (/Users/jasper/.nvm/versions/node/v14.13.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (/Users/jasper/.nvm/versions/node/v14.13.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314:20)
13 verbose stack     at maybeClose (internal/child_process.js:1047:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
14 verbose pkgid @
15 verbose cwd /Users/jasper/code/domain.com/valet
16 verbose Darwin 19.6.0
17 verbose argv "/Users/jasper/.nvm/versions/node/v14.13.0/bin/node" "/Users/jasper/.nvm/versions/node/v14.13.0/bin/npm" "run" "dev"
18 verbose node v14.13.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 2
22 error @ dev: `npm run development`
22 error Exit status 2
23 error Failed at the @ dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

Also see https://laracasts.com/discuss/channels/elixir/laravel-7-laravel-mix-error?page=1#reply=671756

Do You Know A Solution For this Issue ?

Well if we do not load if after Vue has been initiated in our main js file ( with majority of the classes and components) all builds well, but we do need this file require('../assets/vendor/MediaManager/js/manager.js') as well of course. Tried loading it from bootstrap.js where some other js files are loaded but the same error occurs. Think the required file somehow clashes with other components loaded. But now sure what to do yet.. Perhaps we need to load the components directly in the main .js file instead of requiring all this

/*                Libs                */
import Vue2Filters from 'vue2-filters'
import VueClipboard from 'vue-clipboard2'

Vue.use(Vue2Filters)
Vue.use(VueClipboard)
Vue.use(require('vue-ls'))
window.EventHub = require('vuemit')
window.keycode = require('keycode')
window.Fuse = require('fuse.js')

// vue-tippy
Vue.use(require('vue-tippy'), {
    popperOptions: {
        modifiers: {
            hide: {enabled: false}
        }
    }
})

// v-touch
let VueTouch = require('vue-touch')
VueTouch.registerCustomEvent('dbltap', {type: 'tap', taps: 2})
VueTouch.registerCustomEvent('hold', {type: 'press', time: 500})
Vue.use(VueTouch)

// axios
window.axios = require('axios')
axios.defaults.headers.common = {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    'X-Requested-With': 'XMLHttpRequest'
}
axios.interceptors.response.use(
    (response) => response,
    (error) => Promise.reject(error.response)
)

// Echo
// import EchoLib from 'laravel-echo'
// window.Echo = new EchoLib({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

// vue-awesome
require('./modules/icons')
Vue.component('icon', require('vue-awesome/components/Icon').default)
Vue.component('iconTypes', require('./components/utils/icon-types.vue').default)

/*                Components                */
Vue.component('MediaManager', require('./components/manager.vue').default)
Vue.component('MyNotification', require('vue-notif').default)
Vue.component('MyDropdown', require('./components/utils/dropdown.vue').default)

/*                Events                */
if ('connection' in navigator) {
    if (!navigator.connection.saveData) {
        require('./modules/events')
    }
}

So.. not sure yet..

[jasperf]

Perhaps we need to add code from imported ./assets/vendor/MediaManager/js/manager.js file to resources/js/editor.js and properly. It imports multiple Vue plugins, does Axios actions, loads components and events. It also requires Axios which we already require in our code. Looking into this some more.

[ctf0]

for the required plugins, we do need all of them and here is what they are for https://github.com/ctf0/Laravel-Media-Manager/wiki/Packages-In-Use

also from the wiki https://github.com/ctf0/Laravel-Media-Manager/wiki

remove any packages registration that you may already have in your app from manager.js to avoid duplications and keep your files as small as possible.

so yes u can remove any packages that u already use in ur app from the manager.js as long as they come b4 the manager components.

i cant really tell the issue from the error log, i can run the demo repo with watch script without any problems.

[jasperf]

Had to upgrade a few packages: Laravel Mix to 5.0.9, Vue Tippy to 2.1.3 and use Worker Loader as devDependency, not a regular dependency . Now all builds well.

[ctf0]

i try to update the manager as regularly as possible so b4 updating plz check the rdme for any new additions.

[jasperf]

@ctf0 will do better with checks in the future for sure. Thanks for all the hard work on this amazing extension!