Stimulus controller taking a long time to connect

1

Hi,

I’m on edge rails using importmap and my stimulus controller is taking a long time to connect (more than 5 seconds). I’m gettting the following in my console, but from what I found it’s probably not the cause of the slowdown:

Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”.
^^ Module TypeError above is polyfilled and can be ignored ^^

Someone has any idea, I would love to see my pages reload quicker :stuck_out_tongue: ?

2

The console error is expected output when going through the shim (see: importmap-rails > Expected errors from using the es-module-shim)

I have experience with several applications using importmap with stimulus controllers and load times are milliseconds, not seconds. Can you provide a github or online example demonstrating the delay?

3

Hey, @tleish!

Thanks for the response! While I was preparing the example I found the problem. My controller is importing highlight.js and this is causing tons of requests:

image
image1411×308 67.6 KB

In this post How to install Highlight.js to Rails 7 with importmap? - Stack Overflow an user tried the following:

import hljs from "highlight.js/lib/core"
import ruby from 'highlight.js/lib/languages/ruby'
hljs.registerLanguage('ruby', ruby)

But it’s not valid when using importmap.

The best solution I have found was doing the following in my stimulus controller:

import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/es/highlight.min.js';
import ruby from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/es/languages/ruby.min.js';
hljs.registerLanguage("ruby", ruby)

Do you know if there is any way to use this syntax with importmap: import hljs from "highlight.js/lib/core"?

Best regards!

4

Sorry, I do not have any experience with highlight.js:

5

My slowdown was due to importing too much from highlight.js, pinning only the important things solved the issue:

$: bin/importmap pin "highlight.js/lib/core"
$: bin/importmap pin "highlight.js/lib/languages/ruby"

and just import them:

import hljs from 'highlight.js/lib/core';
import ruby from 'highlight.js/lib/languages/ruby';

hljs.registerLanguage("ruby", ruby)

Best regards!