title: I have require is not defined error
body: <p>Trying to implement datatables row-details functionality(<a href="https://datatables.yajrabox.com/eloquent/row-details" rel="nofollow noreferrer">https://datatables.yajrabox.com/eloquent/row-details</a>) in my 
  laravel 5.5.40/ Voyager template( "tcg/voyager": "^1.0" )/ Bootstrap 3.3.7 application
  I encountered an error:</p>
  
  <pre><code>app.js:24 Uncaught ReferenceError: Handlebars is not defined
  </code></pre>
  
  <p>Googling, I found a decision :</p>
  
  <pre><code>var Handlebars = require('handlebars');
  </code></pre>
  
  <p>But I got an error:</p>
  
  <pre><code>articles:915 Uncaught ReferenceError: require is not defined
  </code></pre>
  
  <p>I found which files are attached in the file config/voyager.php:</p>
  
  <pre><code>   ...
      // Here you can specify additional assets you would like to be included in the master.blade
      'additional_css' =&gt; [
          'css/bootstrap-tagsinput-typeahead.css',
          'css/bootstrap-tagsinput.css',
          'css/bootstrap-treeview.css',
          'css/customisation.css',
          'css/spectrum.css',
      ],
  
      'additional_js' =&gt; [
          'js/bootstrap-tagsinput.js',
          'js/spectrum.js',
      ],
     ...
  </code></pre>
  
  <p>Can you give a hint, which file/plugin have I to attach to the list above?
  In the project I found a file <code>/node_modules/webpack/lib/RequireJsStuffPlugin.js</code>
  Is it what I need and how to attach it and how?</p>
  
  <p>Thanks!</p>
  
  <p>MODIFIED :
  after googlingI I installed </p>
  
  <pre><code>npm install requirejs 
  </code></pre>
  
  <p>with output</p>
  
  <pre><code>+ requirejs@2.3.5
  added 1 package from 1 contributor in 26.245s
  </code></pre>
  
  <p>But it  did not help, I still get error :</p>
  
  <pre><code>ReferenceError: require is not
  </code></pre>
  
  <p>Have to include requirejs in some config files or in my script and how if yes?</p>
  
  <p>MODIFIED 2:</p>
  
  <p>With resource <a href="https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file">How do I include a JavaScript file in another JavaScript file?</a>
  I try to fix the error by example : </p>
  
  <blockquote>
    <p>I just wrote this JavaScript code (using Prototype for DOM
    manipulation):</p>
  </blockquote>
  
  <p>For tis I copied file /public/js/require.js ( Prototype JavaScript framework, version 1.7.2 )
  and file public/js/require.js by url <a href="https://gist.github.com/nornagon/284442" rel="nofollow noreferrer">https://gist.github.com/nornagon/284442</a></p>
  
  <p>and in my blade template :</p>
  
  <pre><code>&lt;script src="/js/prototype.js"&gt;&lt;/script&gt;
  &lt;script src="/js/require.js"&gt;&lt;/script&gt;
  @section('javascript')
  </code></pre>
  
  <p>and got error :</p>
  
  <pre><code>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.&lt;anonymous&gt; (articles:896)
      at c (app.js:24)
      at u (app.js:24)
  </code></pre>
  
  <p>on a line :</p>
  
  <pre><code>    var Handlebars = require('handlebars');
  </code></pre>
  
  <p>On the link above there were several example of attaching js files.
  But my case is different , as having error :</p>
  
  <pre><code>Uncaught ReferenceError: Handlebars is not defined
  </code></pre>
  
  <p>I tried to include Handlebars, but in my project  there is no any file like Handlebars.js...
  ?</p>
  
  <p>MODIFIED 3:</p>
  
  <p>In the comments of the example there was fixing issue using Mustache.js:
  <a href="https://github.com/yajra/laravel-datatables/issues/1511" rel="nofollow noreferrer">https://github.com/yajra/laravel-datatables/issues/1511</a>
  I follow it, as :</p>
  
  <pre><code>@extends('layouts.master')
  
  @section('content')
  
  
      &lt;table class="table table-bordered" id="users-table"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Created At&lt;/th&gt;
              &lt;th&gt;Updated At&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  
  @stop
  
  @push('scripts')
  
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"&gt;&lt;/script&gt;
  
      &lt;script id="details-template" type="mustache/x-tmpl"&gt;
      &lt;table class="table"&gt;
          &lt;tr&gt;
              &lt;td&gt;Full name:&lt;/td&gt;
              &lt;td&gt;&lt;%name%&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Email:&lt;/td&gt;
              &lt;td&gt;&lt;%email%&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Extra info:&lt;/td&gt;
              &lt;td&gt;And any further details here (images etc)...&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/script&gt;
  
      &lt;script  &gt;
  
          $(function() {
  
              Mustache.tags = ["&lt;%", "%&gt;"];
              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');
                  }
              });
          });
      &lt;/script&gt;
  
  @endpush
  </code></pre>
  
  <p>And I got error :</p>
  
  <pre><code>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.&lt;anonymous&gt; (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.&lt;anonymous&gt; (index:89)
      at fire (jquery.js:3119)
      at Object.fireWith [as resolveWith] (jquery.js:3231)
  </code></pre>
  
  <p>Looking at the console the template code was found:
  <a href="https://imgur.com/a/WOJPsUw" rel="nofollow noreferrer">https://imgur.com/a/WOJPsUw</a><br>
  as there were misunderstanding of  where to put the template</p>
  
  <pre><code>I have no error if to remove the definition of the first column:
                      {
                          "className":      'details-control',
                      ...
  </code></pre>
  
  <p>Is there a way to fix it ?                                            </p>