CODEWITHSUNDEEP
svelte
Kevin Bridges
Kevin Bridges

Reputation: 41

Svelte compiler generating multiple JavaScript class definitions

I am retrofitting one of my applications from React to Svelte.

This app employs various JavaScript classes for business logic, unrelated to any GUI component representation.

I just discovered that the Svelte compiler is generating multiple renditions of these JavaScript class definitions. From the bundle.js, you can see duplicate class definitions:

// my original Scene class definition
class Scene extends SmartPallet { ... }
...
// a duplicate Scene class definition (generated by the Svelte compiler)
class Scene$1 extends SmartPallet { ... }
...

Because I am registering meta info on the class itself, these duplicate class definitions are causing a major issue, in that I cannot reliably access this meta info :-(

I have not been able to find any reference to this. I am hoping there is a configuration option to prevent this from happening.

Your help is greatly appreciated.

Upvotes: 1

Views: 315

Answers (1)

Kevin Bridges
Kevin Bridges

Reputation: 41

Per Thomas Hennes suggestion, I attempted to replicate this in a simple REPL here. As you can imagine my domain classes are very involved, but his suggestion made sense. Unfortunately I was not able to replicate the problem in this simple form.

This got me thinking that the reason I have not been able to find anything about this issue (I have searched "six ways from Sunday") is it has something to do with my environment.

Consequently, I was able to isolate the issue!!

The duplicate JavaScript class definitions were triggered by my usage of the alias rollup plugin.

I had configured alias to support "Absolute Imports". I setup a tilde (~) alias to reference my source root, eliminating the pain of relative path imports. With this configuration, this relative import:

import Scene  from "../../../../core/Scene";

could become an absolute import:

import Scene  from "~/core/Scene.js";

With that said, my convention was to continue to use relative imports within a given module's directory ... e.g. within core:

import Scene  from "./Scene";

This was the culprit that was causing my duplicate class definitions!!

The work-around solution was to consistently use the same import type (either relative or absolute imports), and the duplicate class definitions disappeared. For now, I chose to stop using the alias rollup plugin.

The severity of this issue will vary based on the application itself:

  1. Certainly in all cases, the bundle size will be bloated (with duplicate definitions).

  2. If the app relies on things like instanceof MyClass, it will be problematic.

  3. In my case, the severity escalates to making it unusable, because my domain object model is somewhat advanced, utilizing package managers that are registering meta information directly on the class definitions ... which cannot be reliably accessed with the duplicate definitions.

I want to issue a "bug report" but I am unsure who the actual culprit is (i.e. who is actually creating the duplicate definitions):

  • Is it the Svelte Compiler? ... I tend to think not

  • Or is it the Rollup Bundler? ... I tend to think this is closer

Thoughts are welcome!!

Thanks in advance.

</Kevin>

Upvotes: 2

Related Questions