Failed to load ressource elfinder.main.js:1 Symfony 5

[elienykama]

Describe the bug I installed the FMElfinderBundle "helios-ag/fm-elfinder-bundle": "^10.0" with ckeditor "friendsofsymfony/ckeditor-bundle": "^2.2". I followed all steps of the both docs and it works in the dev environment : i can use ckeditor and i can browse the serveur with elfinder.

THE PROBLEM : When i deploy the app in the production, IMPOSSIBLE to browse the server with elfinder. I get the error message from the inspector

- elfinder.main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) require.min.js:1

Uncaught Error: Script error for "elfinder.main" https://requirejs.org/docs/errors.html#scripterror at makeError (require.min.js:1) at HTMLScriptElement.onScriptError (require.min.js:1)

The elfinder page is white. Can you HELP please ?

THanks

[helios-ag]

Check if elfinder files are in place, i mean, under public directory. Have you run elfinder:install?

[elienykama]

Yes, elfinder:install is done. That generate : public/bundles/fmelfinder/(css, img, js, sounds)

I copied the missing file (elfinder.mail.js) from my localhost to /public/elfinder.mail.js into my project. After that, now it works in prod.

Why need i to do that manually ? Why without this file elfinder works in local ?

Maybe something to update in the doc ?

Thanks.

[helios-ag]

This file shouldn't be there, i mean its rendered dynamically via controller

Have you tried to access it directly?

[elienykama]

When i try an direct access (in production) i get an error 404. That is the problem... To fix it, i copied the file from my local env to public/ (that is not normal).

Any idea of this problem ?

[l396635210]

i catch the error too. it is similler nginx config,but i dont know how to fix the problem

[YoannValero]

Hello, I have the same error, What contain the file elfinder.main.js . I don't understand where is this file to paste in "/public" for test ? please @elienykama

[hlecorche]

Do you use the framework.assets.version option ? (See #429)

[YoannValero]

Thanks for answer @hlecorche . Yes I use this option. My \src\Resources\views\Elfinder\helper\main.js.twig file :

    // config of RequireJS (REQUIRED)
    require.config({
        baseUrl : "{{ asset('bundles/fmelfinder/js') }}",
        paths : {
            'jquery'   : '//cdnjs.cloudflare.com/ajax/libs/jquery/'+(old? '1.12.4' : jqver)+'/jquery.min',
            'jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/'+uiver+'/jquery-ui.min',
            'elfinder' : 'elfinder.min',
            'encoding-japanese': '//cdn.rawgit.com/polygonplanet/encoding.js/1.0.26/encoding.min'
        },
        waitSeconds : 10 // optional
    });

[elienykama]

@YoannValero the content of elfinder.main.js

`(function(){ "use strict"; var // jQuery and jQueryUI version jqver = '3.3.1', uiver = '1.12.1',

    // Detect language (optional)
    lang = (function() {
        var locq = window.location.search,
            map = {
                'pt' : 'pt_BR',
                'ug' : 'ug_CN',
                'zh' : 'zh_CN'
            },
            full = {
                'zh_tw' : 'zh_TW',
                'zh_cn' : 'zh_CN',
                'fr_ca' : 'fr_CA'
            },
            fullLang, locm, lang;
        if (locq && (locm = locq.match(/lang=([a-zA-Z_-]+)/))) {
            // detection by url query (?lang=xx)
            fullLang = locm[1];
        } else {
            // detection by browser language
            fullLang = (navigator.browserLanguage || navigator.language || navigator.userLanguage || '');
        }
        fullLang = fullLang.replace('-', '_').substr(0,5).toLowerCase();
        if (full[fullLang]) {
            lang = full[fullLang];
        } else {
            lang = (fullLang || 'en').substr(0,2);
            if (map[lang]) {
                lang = map[lang];
            }
        }
        return lang;
    })(),

    // Start elFinder (REQUIRED)
    start = function(elFinder, editors, config) {
        // load jQueryUI CSS
        elFinder.prototype.loadCss('//cdnjs.cloudflare.com/ajax/libs/jqueryui/'+uiver+'/themes/smoothness/jquery-ui.css');

        $(function() {
            var optEditors = {
                    commandsOptions: {
                        edit: {
                            editors: Array.isArray(editors)? editors : []
                        }
                    }
                },
                opts = {};

            // Interpretation of "elFinderConfig"
            if (config && config.managers) {
                $.each(config.managers, function(id, mOpts) {
                    opts = Object.assign(opts, config.defaultOpts || {});
                    // editors marges to opts.commandOptions.edit
                    try {
                        mOpts.commandsOptions.edit.editors = mOpts.commandsOptions.edit.editors.concat(editors || []);
                    } catch(e) {
                        Object.assign(mOpts, optEditors);
                    }
                    // Make elFinder
                    $('#' + id).elfinder(
                        // 1st Arg - options
                        $.extend(true, { lang: lang }, opts, mOpts || {}),
                        // 2nd Arg - before boot up function
                        function(fm, extraObj) {
                            // `init` event callback function
                            fm.bind('init', function() {
                                // Optional for Japanese decoder "encoding-japanese"
                                if (fm.lang === 'ja') {
                                    require(
                                        [ 'encoding-japanese' ],
                                        function(Encoding) {
                                            if (Encoding && Encoding.convert) {
                                                fm.registRawStringDecoder(function(s) {
                                                    return Encoding.convert(s, {to:'UNICODE',type:'string'});
                                                });
                                            }
                                        }
                                    );
                                }
                            });
                        }
                    );
                });
            } else {
                alert('"elFinderConfig" object is wrong.');
            }
        });
    },

    // JavaScript loader (REQUIRED)
    load = function() {
        require([
                'elfinder'
                , 'extras/editors.default.min'               // load text, image editors
                , 'elFinderConfig'
                //  , 'extras/quicklook.googledocs.min'          // optional preview for GoogleApps contents on the GoogleDrive volume
            ],
            start,
            function(error) {
                alert(error.message);
            }
        );
    },

    // is IE8 or :? for determine the jQuery version to use (optional)
    old = (typeof window.addEventListener === 'undefined' && typeof document.getElementsByClassName === 'undefined')
        ||
        (!window.chrome && !document.unqueID && !window.opera && !window.sidebar && 'WebkitAppearance' in document.documentElement.style && document.body.style && typeof document.body.style.webkitFilter === 'undefined');

// config of RequireJS (REQUIRED)
require.config({
    baseUrl : "\/bundles\/fmelfinder\/js",
    paths : {
        'jquery'   : '//cdnjs.cloudflare.com/ajax/libs/jquery/'+(old? '1.12.4' : jqver)+'/jquery.min',
        'jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/'+uiver+'/jquery-ui.min',
        'elfinder' : 'elfinder.min',
        'encoding-japanese': '//cdn.rawgit.com/polygonplanet/encoding.js/1.0.26/encoding.min'
    },
    waitSeconds : 10 // optional
});

// load JavaScripts (REQUIRED)
load();

})(); `

You can put this file in public/elfinder.main.js

After that, it works for me.

Let me know.

[YoannValero]

Thank you @elienykama it works fine 👍