Estoy intentando adjuntar FullCalendar en mi proyecto de Laravel 6. He instalado los paquetes según la web de FullCalendar (ES6 Build System) y todo funciona mientras ponga todo el código en .\resources\js\app.js
. Adjunto código:
app.js
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';
import '@fullcalendar/list/main.css';
document.addEventListener('DOMContentLoaded', function() {
.
.
.
});
El problema lo tengo cuando quiero trasladar esto a la vista. Lo quito de app.js y lo pongo en los siguientes archivos:
app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<link href='node_modules/@fullcalendar/core/main.css' rel='stylesheet' />
<link href='node_modules/@fullcalendar/daygrid/main.css' rel='stylesheet' />
<link href='node_modules/@fullcalendar/timegrid/main.css' rel='stylesheet' />
<link href='node_modules/@fullcalendar/list/main.css' rel='stylesheet' />
@yield('scripts')
.
.
.
</html>
index.blade.php
@extends('layouts.app')
@section('content')
.
.
.
@endsection
@section('scripts')
<script>
import { Calendar } from 'node_modules/@fullcalendar/core';
import dayGridPlugin from 'node_modules/@fullcalendar/daygrid';
import timeGridPlugin from 'node_modules/@fullcalendar/timegrid';
import listPlugin from 'node_modules/@fullcalendar/list';
import interactionPlugin from 'node_modules/@fullcalendar/interaction';
document.addEventListener('DOMContentLoaded', function() {
.
.
.
});
</script>
@endsection
El error que me da en consola es:
SyntaxError: import declarations may only appear at top level of a module