Upgraded to Stimulus 3, console error Cannot call a class constructor without |new|

1

Rails 6.1, was previously using Stimulus 2.0 without issues.

  • Uninstalled stimulus with yarn
  • Installed @hotwired/stimulus and @hotwired/stimulus-webpack-helpers.
  • Updated all my controllers to import { Controller } from "@hotwired/stimulus"
  • Updated application.js to this:
import { Application } from "@hotwired/stimulus"
import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
window.Stimulus = Application.start()
const context = require.context("controllers", true, /.js$/)
Stimulus.load(definitionsFromContext(context))

Now, all my controllers generates the console error Unhandled Promise Rejection: TypeError: Cannot call a class constructor without |new|. On line 2, which is a blank line. Even with an empty controller, like this:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
}

It generates that error in both Safari and Chrome, but if I remove the class declaration the error isn’t thrown. I’m tearing what little of my hair is left out.

3 Likes
2

I have the same error in Django project updating Stimulus from 2.0.0 to 3.0.0.

3

Been trying to fight the same error. I guess there’s something wrong with loading new controllers. I can register controllers from GitHub - excid3/tailwindcss-stimulus-components: A set of StimulusJS components for TailwindCSS apps similar to Bootstrap JS components. but I cannot event the hello_controller from the Stimulus Handbook

I event trying without @hotwired/stimulus-webpack-helpers and manually load the controller but I have always the same error. I feel I’m missing some steps on my application.js. Here are my relevant lines:

const images = require.context("../images", true);
const imagePath = (name) => images(name, true);

import "./application.scss";

import { Application } from "@hotwired/stimulus";
//import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers";
import {
  Alert,
  ColorPreview,
  Dropdown,
  Modal,
  Popover,
  Slideover,
  Tabs,
  Toggle,
} from "tailwindcss-stimulus-components";

import HelloController from "../controllers/hello_controller";

const application = Application.start();

// Import and register all TailwindCSS Components
application.register("alert", Alert);
application.register("color-preview", ColorPreview);
application.register("dropdown", Dropdown);
application.register("modal", Modal);
application.register("popover", Popover);
application.register("slideover", Slideover);
application.register("tabs", Tabs);
application.register("toggle", Toggle);

// Import and register all custom controllers
application.register("hello", HelloController);

window.Stimulus = application;
4

CleanShot 2021-10-08 at 11.36.55@2x
CleanShot 2021-10-08 at 11.36.55@2x1738×296 41 KB

I upgraded my use of stimulus-use to point to the beta branch and everything works just fine! Perhaps create a PR for @excid3 (I know the guy is uber busy with all his open-source contributions and projects).

EDIT: Looks like he already upgraded to v3 Releases · excid3/tailwindcss-stimulus-components · GitHub

5

Are you stating that you’re using stimulus-use and not stimulus, from what I’ve understood and my experience, this error happens with the version 3.0.0.. I haven’t tried with yesterday’s 3.0.1 release yet.

6

I use both but had to also upgrade stimulus-use because accordingly there were breaking changes.

Perhaps have a look at what changes stimulus-use made for compatibility.

7

Found this Cannot use Stimulus 3.0.0-beta.1 with Webpacker 6.0.0.rc.5 - githubmemory and did what is suggested near the end:

  1. add a babel-preset.js in the root directory
  2. copy the content from Fix/workaround for rails/webpacker#3153 · ubpb/catalog@47bf8cc · GitHub

and got this issue solved.