Cannot import CSS into a JavaScript file without an output path configured

Sorry to be so uninformed here, but I’m getting conflicting google foo…
I’m trying to write a JS script that imports both JS and CSS and uses JSBuild…

{{- $targetPath := (printf "js/fullcalendar-%s.js" $id) }}
{{- $opts := dict
  "targetPath" $targetPath
  "minify" hugo.IsProduction
  "params" (dict
    "id" $id
    "initialDate" ($page.Date.Format $isoformat)
    "initialView" $view
    "data" $merged)
}}
{{- $js := resources.Get "js/fullcalendar.js" | js.Build $opts }}
{{- if hugo.IsProduction }}
  {{- $js = $js | fingerprint }}
{{- end }}
<script src="{{ $js.RelPermalink }}"></script>

It’s dying when jsbuild tries to import the CSS with the error:
JSBUILD: failed to transform "js/fullcalendar.js" (text/javascript): "/Users/pst/Sites/hb-goattrails/assets/js/fullcalendar.js:9:7": Cannot import "node_modules/bootstrap/dist/css/bootstrap.css" into a JavaScript file without an output path configuredJSBUILD: failed to transform "js/fullcalendar.js" (text/javascript): "/Users/pst/Sites/hb-goattrails/assets/js/fullcalendar.js:9:7": Cannot import "node_modules/bootstrap/dist/css/bootstrap.css" into a JavaScript file without an output path configured

First off, I didn’t even realize jsbuild could handle CSS in a JS file… but that’s what the example code is suggesting that I do.

Can anyone give me a pointer? Am I using the wrong js build engine (like do I need web pack) with Hugo?

import { Calendar } from '@fullcalendar/core';
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';

import params from '@params';

// import bootstrap stylesheets directly from your JS
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-icons/font/bootstrap-icons.css' // needs additional webpack config!


(() => {
    "use strict";
    document.addEventListener("DOMContentLoaded", function() {
        var calendarEl = document.getElementById(params.id);
        var defaults = {
            plugins: [ dayGridPlugin, timeGridPlugin, bootstrap5Plugin ],
            // themeSystem: "bootstrap5",
            views: {
                dayGrid: {
                    displayEventEnd: true
                }
            },
            headerToolbar: {
                left: "prev,next",
                center: "title",
                right: "dayGridMonth,timeGridWeek"
            },
            initialDate: params.initialDate,
            initialView: params.initialView,
            eventOrder: "-allDay"
        };
        var merged = Object.assign({}, params.data, defaults);
        var calendar = new Calendar(calendarEl, merged);
        calendar.render();
    });
})();
1 Like

Thank you for the pointer, it’s a bummer that that patch was not merged into Hugo, but I see the alternatives.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.