How to add color-picker to laravel 5 app?

[sergeynilov]

Hello,

In my laravel 5.7 / jquery 3.4.1
I want to add color-picker and in my edit.blade.php file I add link to color-picker files and js file which is related to this editor after
color-picker files :

@section('scripts')

    <link rel="stylesheet" href="{{ asset('/css/acolorpicker.css') }}" type="text/css">
    <script src="{{ asset('/js/acolorpicker.js') }}"></script>

    <script src="{{ asset('js/'.$current_admin_template.'/color.js') }}{{  "?dt=".time()  }}"></script>

    <script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\ColorRequest', '#form_color_edit'); !!}


    <script>
        /*<![CDATA[*/

        var backendColor = new backendColor('edit',  // must be called before jQuery(document).ready(function ($) {
            <?php echo $appParamsForJSArray ?>
        );
        jQuery(document).ready(function ($) {
            backendColor.onBackendPageInit('edit')
        });

        /*]]>*/
    </script>

@endsection

and in color.js I try to init color-picker as :

var this_backend_home_url
var this_id
var this_csrf_token

function backendColor(page, paramsArray) {  // constructor of backend Color's editor - set all from referring page and from server
    // alert( "backendColor  paramsArray::"+var_dump(paramsArray) )
    this_backend_home_url = paramsArray.backend_home_url;
    this_backendLengthMenuArray = paramsArray.backendLengthMenuArray;
    this_csrf_token = paramsArray.csrf_token;

    if (page == "edit") {
        this_id = paramsArray.id;
    }
    if (page == "list") {
        this.ColorsLoad()
        $(".dataTables_filter").css("display", "none")
        $(".dataTables_info").css("display", "none")
    }
} // function backendColor(Params) {  constructor of backend Color's editor - set all from referring page and from server


backendColor.prototype.onBackendPageInit = function (page) {  // all vars/objects init
    backendInit()
    const AColorPicker = require('a-color-picker'); // I GOT JS errors (Below) !
    AColorPicker.from('color-picker');

} // backendColor.prototype.onBackendPageInit= function(page) {
...

But I got JS errors:

Uncaught SyntaxError: Cannot use import statement outside a module
DevTools failed to parse SourceMap: http://local-boxbooking2.com/css/bootstrap.min.css.map
jquery-3.3.1.min.js:2 jQuery.Deferred exception: require is not defined ReferenceError: require is not defined
    at backendColor.onBackendPageInit (http://local-boxbooking2.com/js/Backend/color.js?dt=1583830130:24:26)
    at HTMLDocument.<anonymous> (http://local-boxbooking2.com/admin/colors/3/edit:385:26)
    at l (http://local-boxbooking2.com/js/jquery-3.3.1.min.js:2:29375)
    at c (http://local-boxbooking2.com/js/jquery-3.3.1.min.js:2:29677) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
c @ jquery-3.3.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
fire @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
ready @ jquery-3.3.1.min.js:2
_ @ jquery-3.3.1.min.js:2
jquery-3.3.1.min.js:2 Uncaught ReferenceError: require is not defined
    at backendColor.onBackendPageInit (color.js?dt=1583830130:24)
    at HTMLDocument.<anonymous> (edit:385)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)

Which is valid way to add color-picker to the project?

2. I tried to comment line
   const AColorPicker = require('a-color-picker');
   then I got errors on next lines :

SyntaxError: import declarations may only appear at top level of a module acolorpicker.js:10
jQuery.Deferred exception: AColorPicker is not defined backendColor.prototype.onBackendPageInit@http://local-boxbooking2.com/js/Backend/color.js?dt=1583942792:25:5
@http://local-boxbooking2.com/admin/colors/1/edit:385:26
l@http://local-boxbooking2.com/js/jquery-3.3.1.min.js:2:29375
a/</c<@http://local-boxbooking2.com/js/jquery-3.3.1.min.js:2:29677
 undefined jquery-3.3.1.min.js:2:30930
ReferenceError: AColorPicker is not definedcolor.js:25:5

```How correct it ?



Thanks!