Getting exception "TypeError: currentDirective._$initialize is not a function" after upgrading from 2.4 to 2.5 or higher

[samueldjack]

We've been using certain shoelace components for several months now, with version 2.4 of Shoelace. I came to upgrade yesterday, and now I'm hitting Javascript exceptions.

The exception message is currentDirective._$initialize is not a function with the reported stacktrace

TypeError: currentDirective._$initialize is not a function
at resolveDirective (webpack-internal:///34633:658:30)    
at AttributePart._$setValue (webpack-internal:///34633:1171:21)    
at TemplateInstance._update (webpack-internal:///34633:750:26)  
at ChildPart._commitTemplateResult (webpack-internal:///34633:1011:22)    
at ChildPart._$setValue (webpack-internal:///34633:860:18)    
at render (webpack-internal:///34633:1471:10)    
at SlProgressBar.update (webpack-internal:///8922:29:584)\
at SlProgressBar.performUpdate (webpack-internal:///30579:829:22)  
at SlProgressBar.scheduleUpdate (webpack-internal:///30579:764:21)    
at SlProgressBar.__enqueueUpdate (webpack-internal:///30579:737:29)

I initially upgraded to 2.13.1 where I first saw this exception. Then I stepped back to 2.13.0, and 2.5.0. Each gives this error.

The only other reference I can find to a similar error though google is material-components/material-web#4101. That suggests that the Webpack build mode (development vs production) might be part of the problem. And indeed, if I switch to a production build then the exception goes away. But that isn't a long term solution, because I need to keep development mode on whilst I'm developing.

It seems significant that this error appeared in the version of Shoelace which stopped bundling lit. As far as I can tell, none of our other dependencies use lit, though according to lit's documentation, it shouldn't be a problem if they did.

Has anyone else seen this error? Any ideas as to how I can narrow down the cause of the problem.

Thanks!

[claviska]

Sorry, I've never seen that error and I avoid webpack any chance I can. If you're not using Lit anywhere else, you can import from the cdn/ folder instead of dist/. The only difference is the dependencies ship with bare module specifiers in dist/ so your build system has to resolve them. Using cdn/ will basically give you the same behavior as before we offered both.

[samueldjack]

Thanks for that suggestion.

We're not presently using lit for anything else. What would happen if we do, and we still use the cdn build? Would it just duplicate lit in our bundle, or could complications arise?

[KonnorRogers]

@samueldjack Yes it'll result in duplicate Lit implementations, which Lit will give you a console warning about.

Complications "in theory" could arise, but I haven't seen it in practice.

If you have a reproduction for this, that would help tremendously so we could file a proper issue with the Lit team.

[JulianCataldo]

I had the same error (currentDirective._$initialize is not a function) with a custom Vite library.

Turns out you must exclude everything Lit-related, so it doesn't get bundled in production mode.

    build: {
      rollupOptions: {
        external: [
          'lit/directives/ref.js',
          'lit/decorators.js',
          'lit/directives/unsafe-html.js',
          'lit/directives/class-map.js',
          'lit/directives/style-map.js',
          // ...

I did it but forgot some. Had to search "Google" (license in JSDoc) in the built file to chase remaining ones (some are indirect deps).

---

Using "production" node export condition in development mode can make the error go away, but it's not recommended.

  resolve: {
    conditions: ["production"],
  },

Instead, make sure that no Lit implementation is bundled somewhere by a library you are importing in your app.
Hopefully you can control what you are importing, like in my case.