Module import issues with TypeScript

[Stephen Ierodiaconou]

Ive come across an issue that I'm trying to resolve with using this package with TypeScript (using esbuild, typescript 4.6, and target esnext):

If you import a component and then try to extend it to create a new component, the import statement seems to resolve to the ESM module.js dist file, instead of the modern.js dist.

import { Dropdown } from "tailwindcss-stimulus-components";

export default class DropdownController extends Dropdown {}

This results in the following runtime issue:

autosave.js:4 Uncaught (in promise) TypeError: Class constructor Controller cannot be invoked without 'new'

The problem is similar to https://stackoverflow.com/a/51860850/268602 but rather than being related to the compilation target, is related to the import resolution I believe.

This seems it should be solvable with the correct incantation of exports https://www.typescriptlang.org/docs/handbook/esm-node.html - https://nodejs.org/api/packages.html#packages_exports but just not worked it out yet!

[Stephen Ierodiaconou]

So looking at this hotwired/stimulus#421 im wondering if cjs is even needed since this depends on stimulus 3 anyway and it only includes dist/stimulus.js (which uses the class keyword) and a umd module in its dist

Maybe a simpler package setup could be master...stevegeek:master ?

That fixes the problem but I dont know if this will break things for others using this lib...

[Shawn Aukstakalnis]

I ran into the same problem (although I'm not using typescript). I was extending Modal and it was returning the error. What's interesting is I was getting the same error from Tabs, and I'm not extending it.

@stevegeek I installed your fork locally, and it works!

[Jakob Skjerning]

We're seeing this as well in a webpack-based application with no Typescript. And likewise, using @stevegeek's fork, fixed the issue for us, thanks!

For the record, the error message in Firefox was:

Uncaught (in promise) TypeError: class constructors must be invoked with 'new'
    e tailwindcss-stimulus-components.module.js:88
    extended stimulus.js:1562
...

To reproduce the issue we had to both import Dropdown controller and to have a data-controller="dropdown" element in the markup:

import { Dropdown } from "tailwindcss-stimulus-components"
application.register('dropdown', Dropdown)

[Chris Oliver]

We're moving to esbuild, so please check out #188

[Jakob Skjerning]

V4 / #188 seems to solve the issue for us as well, and seems to maybe be a bit more futureproof? Cheers @excid3

[Chris Oliver]

Excellent. Releasing v4 today if I can find some time. Kid's home sick with pneumonia, so we'll see. 🙃