estoy intentando montar una tabla dinámica con Jquery Datatables usando los datos públicos de una api, para ello tengo este código en el layout de blade
Aquí cargo los cdn de jquery y datables
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
En el formulario tengo el siguiente código
@extends('layout')
@section('content')
<div class="container">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>User Id</th>
<th>Id</th>
<th>Title</th>
<th>Completed</th>
</tr>
</thead>
<tfoot>
<tr>
<th>User Id</th>
<th>Id</th>
<th>Title</th>
<th>Completed</th>
</tr>
</tfoot>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "https://jsonplaceholder.typicode.com/todos",
"dataSrc": "",
"columns": [
{ "data": "userId" },
{ "data": "id" },
{ "data": "title" },
{ "data": "completed" },
]
} );
} );
</script>
@endsection
El error que me da es este, y hace que no me cargue los datos de la tabla.
Uncaught TypeError: Cannot read property 'length' of undefined