search

ctf0 / Laravel-Media-Manager

A "Vuejs & Laravel" Media Manager With Tons of Features
MIT License
828 stars 179 forks source link

JS compiling error... #180

Closed Zubair-Iftikhar closed 3 years ago

Zubair-Iftikhar commented 3 years ago

Note: demo project I've check it's working fine .but the issue with fresh Laravel installation 

"ctf0/media-manager": "^3.8",
"laravel/framework": "^8.12",

using these line of code

import Vue from 'vue'

require('../assets/vendor/MediaManager/js/manager')

new Vue({
    el: '#app'
})

D:\testing\file_manager>npm run watch

> @ watch D:\testing\file_manager
> mix watch

ERROR in ./resources/assets/vendor/MediaManager/js/manager.js 54:22-71
Module not found: Error: Can't resolve 'vue-awesome/components/Icon' in 'D:\testing\file_manager\resources\assets\vendor\MediaManager\js'

ERROR in ./resources/assets/vendor/MediaManager/js/modules/icons.js 78:0-47
Module not found: Error: Can't resolve 'vue-awesome/components/Icon' in 'D:\testing\file_manager\resources\assets\vendor\MediaManager\js\modules'

ERROR in ./node_modules/vue-awesome/components/Icon.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <script>
| let icons = {}
|

ERROR in ./node_modules/vue-notif/src/Notification.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div>
|         <!-- single -->

ERROR in ./resources/assets/vendor/MediaManager/js/components/manager.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <style lang="scss" scoped src="../../sass/packages/bulma.scss"></style>
|
| <script>

ERROR in ./resources/assets/vendor/MediaManager/js/components/utils/dropdown.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div class="dropdown"
|          :class="{'is-active' : show}"

ERROR in ./resources/assets/vendor/MediaManager/js/components/utils/icon-types.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <span v-if="currentType.type">
|         <icon :class="classes"

webpack compiled with 7 errors
ctf0 commented 3 years ago

have u installed all the deps ?

Zubair-Iftikhar commented 3 years ago

have u installed all the deps ?

Yes

"devDependencies": {
        "axios": "^0.21.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.7",
        "sass-loader": "^8.0.2"
    },
    "dependencies": {
        "annyang": "^2.6.1",
        "buffer": "^6.0.3",
        "cropperjs": "^1.5.11",
        "dropzone": "^5.7.6",
        "fuse.js": "^6.4.6",
        "idb-keyval": "^5.0.2",
        "keycode": "^2.2.0",
        "lottie-web": "^5.7.6",
        "music-metadata-browser": "^2.2.4",
        "plyr": "^3.6.4",
        "process": "^0.11.10",
        "vue": "^2.6.12",
        "vue-awesome": "^4.1.0",
        "vue-clipboard2": "^0.3.1",
        "vue-focuspoint-component": "^2.0.1",
        "vue-image-compare2": "^1.0.0",
        "vue-infinite-loading": "^2.4.5",
        "vue-input-autowidth": "^1.0.10",
        "vue-ls": "^3.2.2",
        "vue-notif": "^2.0.0",
        "vue-tippy": "^2.1.3",
        "vue-touch": "^2.0.0-beta.4",
        "vue2-filters": "^0.12.0"
    }

composer.json

"require": {
        "php": "^7.3|^8.0",
        "ctf0/media-manager": "^3.8",
        "fideloper/proxy": "^4.4",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.12",
        "laravel/tinker": "^2.5"
    }
ctf0 commented 3 years ago

ok, can u make a test repo for me to test with ?

Zubair-Iftikhar commented 3 years ago

ok, can u make a test repo for me to test with ?

https://github.com/zu007/laravelMediaManager

ctf0 commented 3 years ago

u were missing .vue() check https://github.com/ctf0/Laravel-Media-Manager/wiki/Laravel-Mix-V6

also stated in the readme

add this one liner to your main js file and run npm run watch to compile your js/css files.

if you are having issues Check. also check mix v6 notes

Zubair-Iftikhar commented 3 years ago

When Clicking on Browser Button for file in editor..error comes 

<script>
    tinymce.init({
        selector: 'textarea#basic-example',
        height: 500,
        menubar: false,
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table directionality",
            "emoticons template paste textpattern"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
        file_picker_callback(field_name, url, type, win) {
            // alert('addTablePopoverButtons');

            let field = win.document.getElementById(field_name)
            $('.__Inmodal-editor').click()

            EventHub.listen('file_selected', (path) => {
                if (field) field.value = path
            })
        },

        // (optional) close the manager when pressing "OK"
        init_instance_callback(editor) {
            editor.on('BeforeSetContent', () => {
                $('.__Inmodal-editor-hide').click()
            })
        },
    });

</script>
theme.min.js:2 Uncaught TypeError: Cannot read property 'document' of undefined
    at VE.file_picker_callback ((index):46)
    at theme.min.js:2
    at new Promise (<anonymous>)
    at theme.min.js:2
    at Object.t [as get] (theme.min.js:2)
    at theme.min.js:2
    at Object.each (theme.min.js:2)
    at theme.min.js:2
    at Object.each (theme.min.js:2)
    at theme.min.js:
ctf0 commented 3 years ago

i havent used tinymce for over a year so cant support any issues related to it, sorry.