Bad Import Statement in Stimulus Controller Doesn't Raise an Error about importmap-rails

[chadrschroeder]

I'm going to close this issue. The original problem that I was seeing was really related to the use of console.debug in stimulus-rails and I've now logged a new issue there.

I'll let @glennfu open another issue in this repo if there are still problems specific to importmap-rails and Chart.js.

[MattStopa]

This is incredibly frustrating that is fails silently. There are a number of issues like this with importmap-rails.

[dhh]

I believe this is a fundamental constraint with the browser JS engine. Not something we can do much/anything about. Cc @guybedford?

[dhh]

How are you loading your stimulus controllers? lazyLoad or eagerLoad? Or you're using explicit import statements? Sounds like the latter rather than using the new default loader setup?

[glennfu]

I'm having this problem while using eagerLoadControllersFrom. The Chart.js moment adapter says to add import 'chartjs-adapter-moment' after including Chart.js. Before adding it, everything loads fine. After adding it, I see Failed to register controller: my_controller_name... and no other explanation. I don't know how to get any clarity on what I've done wrong (I already pinned chartjs-adapter-moment in importmap). Is there a way to manually build the javascript somewhere that could provide error output?

[chadrschroeder]

I started with a clean app:

rails _7.0.0_ new my_app

This already included importmap-rails and stimulus-rails. Then I added a route so that the application layout would be used:

# routes.rb
root "application#index"

# ApplicationController
def index
  render inline: "<div data-controller='hello' />", layout: true
end

This will show the "Hello World!" text in the browser. The hello_controller.js is imported like:

<script type="importmap" data-turbo-track="reload">{
  "imports": {
    ...
    "controllers/hello_controller": "/assets/controllers/hello_controller-24e492b6f1517d1201fffc668bb9dd12c041134bd03f35f2613ae3d68706c339.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
  }
}</script>

Then I made an invalid import statement:

// app/javascript/controllers/hello_controller.js
import { Controller } from "bad_name_here"

The view will no longer show the "Hello World!" text and there will be no error in the JavaScript console.

I'm now seeing that this code will log an exception using console.debug. The browser default is for these to be hidden but I can see them if I turn on "Verbose" logging. That gives me the info I'm looking for:

Failed to register controller: hello (controllers/hello_controller) TypeError: Failed to resolve module specifier "bad_name_here"...

Other areas in the Stimulus code use console.log to log errors.

Should the console.debug calls be flipped to console.log? I've never had a need to turn verbose logging on, so the errors I used to see when working with Webpacker must have been logged with something like console.log. But I'm fine with keeping verbose logging on for now if you think console.debug is acceptable.

[glennfu]

Interesting I already had that turned on but it's still not giving me clarity. Good code:

import { Chart } from "chart.js"

Bad code:

import { Chart } from "chart.js"
import 'chartjs-adapter-moment'
=> stimulus-loading-685d40...883c0.js:26 Failed to register controller: chartz (controllers/chartz_controller) SyntaxError: The requested module 'chart.js' does not provide an export named 'default'

I already know that the 'chart.js' line runs fine, so why the vague error with no line number pointing to it? importmap.rb for context:

pin "chart.js", to: "https://ga.jspm.io/npm:[email protected]/dist/chart.esm.js"
pin "chartjs-adapter-moment", to: "https://ga.jspm.io/npm:[email protected]/dist/chartjs-adapter-moment.js"

[chadrschroeder]

@glennfu I think you might want to try something like this:

import { Chart } from "chart.js/auto"

See: https://www.chartjs.org/docs/3.3.1/getting-started/integration.html#bundlers-webpack-rollup-etc

[glennfu]

That doesn't work because then importmap doesn't know what it is, since it doesn't match the string "chart.js/auto". That doc does say this is equivalent to:

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

which also successfully loads for me, but sadly doesn't help me with my problem. Adding import 'chartjs-adapter-moment' below still breaks the load of the controller and gives me that vague error with no line number.

It could mean that there's something wrong with chartjs-adapter-moment that needs updating and it just simply won't work with this kind of set up. I'm not experienced enough with this kind of JS mess to know for sure, which is one of the reasons I'm eager to use some of these new JS loading libraries... so that I don't need to worry about JS loading!

[guybedford]

SyntaxError: The requested module 'chart.js' does not provide an export named 'default'

This error usually means you want to be using import * as Chart from 'chart.js' or the named export from whatever module you are importing.

[glennfu]

I've tried import * as momentAdapter from 'chartjs-adapter-moment' but still get the same cryptic error. Interestingly, if I try a different plugin, I can successfully add it with import zoomPlugin from 'chartjs-plugin-zoom'. So it does seem at least in part to be a problem with that specific plugin.

I don't mean to hijack this thread with my specific issue. The only point I really want to contribute here is how I can try so many different things, and I always get the same vague error that really only tells me "something is wrong with your controller and I'm not going to tell you what it is". My hope, like the OP mentions, is that we could somehow get access to a more helpful error message.