TypeError: Failed to fetch dynamically imported module: chrono-node

1

Trying to use chrono-node package with importmaps but it results in this error. I faced these sorts of issues before but it was due to my code changes.

Reference: Failed to fetch dynamically imported module

This time, I didn’t change anything. I just;

  1. created a stimulus controller with bin/rails g stimulus date-nlp
  2. pinned chrono-node with bin/importmap pin chrono-node. It resulted in the importmap.rb attached below.
  3. Imported it as import * as chrono from 'chrono-node'

I tried the other packages that it pinned and they are working fine. This package, “Chrono-Node” is failing.

What am I doing wrong?

Code Dump

Package in question: GitHub - wanasit/chrono: A natural language date parser in Javascript

Error from browser

image
image1920×337 35.4 KB

config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "@rails/actiontext", to: "actiontext.esm.js"
pin "tributejs" # @5.1.3
pin "chrono-node" # @2.7.5
pin "dayjs" # @1.11.10
pin "dayjs/plugin/quarterOfYear.js", to: "dayjs--plugin--quarterOfYear.js.js" # @1.11.10

app/javascript/controllers/date_nlp_controller.js

import { Controller } from "@hotwired/stimulus"
import * as dayjs from "dayjs" // This Works
import * as dayjs2 from "dayjs/plugin/quarterOfYear.js" // This Works
import * as chrono from 'chrono-node' // This doesn't

// Connects to data-controller="date-nlp"
export default class extends Controller {
  connect() {
    console.log("connected to date-nlp");
    console.log({dayjs, dayjs2}) // Working
    this.element.controller = this;
  }

  thisIsAMethod() {
    console.log("This is a method");
  }

  parseDate(input) {
    const result = chrono.parseDate(input);
    console.log(result);
  }
}

HTML where controller is used:

<div data-controller="date-nlp" id="chrono">Chrono Node</div>
2

Solved it by shifting to ESBuild