bulma-calendar icon indicating copy to clipboard operation
bulma-calendar copied to clipboard

Can't import bulmaCalendar in a Django project

Open DMunkei opened this issue 2 years ago • 1 comments

Is this something you can debug and fix? Send a pull request! Bug fixes and documentation fixes are welcome.

  • [ x] Are you running the latest version?
  • [x ] Are you reporting to the correct repository?

Bug Report

Environment

  • Extension version(s): [e.g. v1.0.0, ...]
  • Bulma version: [e.g. v7.1 / v7.2]
  • OS: Linux Manjaro
  • Browser: Firefox | Chromium
  • How you are customizing the extension: no

Current Behavior Trying to import the sample code from the Quick start section. Fails with the following error messages.

  • Firefox Uncaught SyntaxError: ambiguous indirect export: bulmaCalendar
  • Chrome Uncaught SyntaxError: The requested module './bulma-calendar.min.js' does not provide an export named 'bulmaCalendar

Input Code

import { bulmaCalendar} from "./bulma-calendar.min.js";

$(document).ready(function() {

  // Initialize the picker with the ID of the input field
  const datePicker = bulmaCalendar.attach('#date-picker', {
      type: 'date',
      dateFormat: 'DD-MM-YYYY',
      displayMode: 'inline',
  });

  // Add an event listener to the picker to get the selected date
  datePicker.on('select', date => {
      console.log(date);
  });

});

Additional context/Screenshots I'm trying to import this into a Django 4.1.5 project, that's already using bulma.io. I cloned the repo and copied the contents of bulma-calendar/dist/js bulma-calendar/dist/css into my static/js static/css folders in my Django project.

Here are the import statements for both bulma.io and bulma-calendar in Djangos template engine

      <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}">
      <link rel="stylesheet" href="{% static "css/bulma-calendar.css" %}">
      <script src="{% static 'js/bulma-calendar.js' %}"></script>

      <script type="module" src="{% static 'js/calendar.js' %}"></script> <------- File I'm trying to import the contents in.

Steps to reproduce

  1. Clone repository using HTTPS
  2. Copy content of bulma-calendar/dist/js bulma-calendar/dist/css to the static folder in a Django project
  3. Bind the files in the base layout folder in Django
  4. Try to execute sample code

DMunkei avatar Mar 22 '23 17:03 DMunkei

Don't know if this would be helpful, but ran into the same issue recently, though I'm using Go instead. Based on what worked for me, you might need to adjust your import as follows.

import * as bulmaCalendar from "./bulma-calendar.min.js";

hkmshb avatar Apr 15 '24 16:04 hkmshb