Laravel ReferenceError: require is not defined

[mstdmstd]

Привет,

Пытаясь запустить datatables row-details функционал(https://datatables.yajrabox.com/eloquent/row-details) в моем
laravel 5.5.40/ Voyager template( "tcg/voyager": "^1.0" )/ Bootstrap 3.3.7 приложении
получил ошибку:

app.js:24 Uncaught ReferenceError: Handlebars is not defined

Погуглив, нашел решение :

var Handlebars = require('handlebars');

получил ошибку:

articles:915 Uncaught ReferenceError: require is not defined

Я нашел что список файлов подключаемых в проекте в config/voyager.php:

...
// Here you can specify additional assets you would like to be included in the master.blade
'additional_css' => [
'css/bootstrap-tagsinput-typeahead.css',
'css/bootstrap-tagsinput.css',
'css/bootstrap-treeview.css',
'css/customisation.css',
'css/spectrum.css',
],

'additional_js' => [
'js/bootstrap-tagsinput.js',
'js/spectrum.js',
],
...

Не подскажите, какой файл/плагин должен я подключить?
В проекте я нашел файл /node_modules/webpack/lib/RequireJsStuffPlugin.js
Это не он и если да то как егшо подкючить ?

Спасибо!

 

[mstdmstd]

На одном из ресурсов получил ссылку на https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file
и пробую исправить ошибку по примеру :

I just wrote this JavaScript code (using Prototype for DOM manipulation):

Для чего скопировал файл /public/js/require.js ( Prototype JavaScript framework, version 1.7.2 )
И файл public/js/require.js по ссылке https://gist.github.com/nornagon/284442

И в своем темплете :

<script src="/js/prototype.js"></script>
<script src="/js/require.js"></script>
@section('javascript')

И получил ошибку :

Uncaught TypeError: element.attachEvent is not a function
at observeStandardEvent (prototype.js:6950)
at observe (prototype.js:6940)
at HTMLScriptElement._methodized [as observe] (prototype.js:456)
at require.js:21
at showArticleListing (articles:1021)
at HTMLDocument.<anonymous> (articles:896)
at c (app.js:24)
at u (app.js:24)

На строку :

var Handlebars = require('handlebars');

?

 

[mstdmstd]

Я создал новый laravel проект и и без проблем создал и запустил пример из https://datatables.yajrabox.com/starter.


1) И проблемы начались с подключения;

//var Handlebars = require('handlebars');
var template = Handlebars.compile($("#details-template").html());

Может быть этот Handlebars надо было подключать как-то иначе ?

И если в файл resources/views/datatables/index.blade.php я подключал bootstrap :

@push('scripts')

<script >
$(function() {

require('./bootstrap'); // Ошибка Uncaught ReferenceError: require is not defined

Может нужно указать версию javascript в загаловке выше?
Если да то какую ?

2) если в пролекте подключить resources/assets/js/app.js то строка

require('./bootstrap');

ошибки не вызывает
если в resources/assets/js/app.js добавить строку :

var Handlebars = require('.handlebars');

то ошибка

app.js:13886 Uncaught Error: Cannot find module "handlebars"

какие-то непонятки с этим handlebars ...

 

[mstdmstd]

В коментариях ниже была ссылка на исправления с помощью Mustache.js:
https://github.com/yajra/laravel-datatables/issues/1511
Я делал по ней

@extends('layouts.master')

@section('content')


    <table class="table table-bordered" id="users-table">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created At</th>
            <th>Updated At</th>
        </tr>
        </thead>
    </table>

@stop

@push('scripts')

    <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

    <script id="details-template" type="mustache/x-tmpl">
    <table class="table">
        <tr>
            <td>Full name:</td>
            <td><%name%></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><%email%></td>
        </tr>
        <tr>
            <td>Extra info:</td>
            <td>And any further details here (images etc)...</td>
        </tr>
    </table>
    </script>

    <script  >

        $(function() {

            Mustache.tags = ["<%", "%>"];
            var template = $('#details-template').html();

            console.log("template::")
            console.log( template )

            var table= $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{!! route('get_users') !!}',
                columns: [
                    {
                        "className":      'details-control',
                        "orderable":      false,
                        "searchable":     false,
                        "data":           null,
                        "defaultContent": ''
                    },
                    
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'updated_at', name: 'updated_at' }
                ]
            });


            // Add event listener for opening and closing details
            $('#users-table tbody').on('click', 'td.details-control', function () {
                console.log( '-1' )
                var tr = $(this).closest('tr');
                console.log("-2 tr::")
                console.log( tr )

                var row = table.row( tr );
                console.log("-3 row::")
                console.log( row )


                if ( row.child.isShown() ) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
//                    row.child( template(row.data()) ).show();
                    row.child( Mustache.render(template, row.data()) ).show();
                    console.log("row::")
                    console.log( row )


                    tr.addClass('shown');
                }
            });
        });
    </script>

@endpush

И получаю ошибку :

jquery.dataTables.min.js:59 Uncaught TypeError: Cannot read property 'style' of undefined
at Ga (jquery.dataTables.min.js:59)
at ga (jquery.dataTables.min.js:45)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:93)
at Function.each (jquery.js:383)
at jQuery.fn.init.each (jquery.js:136)
at jQuery.fn.init.m [as dataTable] (jquery.dataTables.min.js:83)
at jQuery.fn.init.P.h.fn.DataTable (jquery.dataTables.min.js:159)
at HTMLDocument.<anonymous> (index:89)
at fire (jquery.js:3119)
at Object.fireWith [as resolveWith] (jquery.js:3231)

Судя по выводу код темплейта найден
https://imgur.com/a/WOJPsUw
так как были непонятки с тем куда его поместить ...

Ошибка исчезает если убрать определение 1й колонки:

{
"className": 'details-control',
...

Как это можно побороть ?