Vite fails on module specifiers when importing Plugin class

[Laurelin]

Description

I'm attempting to build a plugin for my app using Typescript. It looks great in my code editor, but it fails on vite:import-analysis because the base class for plugins is not included in the module specifiers. I'm using Nuxt 3.

I can see and click into the Plugin class from intellisense and node_modules. It's there, but vite fails it.

Steps to check or reproduce

import Plugin from 'billboard.js/src/plugin/Plugin'
import _ from 'lodash'

class myClass extends Plugin {
...
}

run the nuxt dev command in terminal

ERROR Internal server error: Missing "./src/plugin/Plugin" specifier in "billboard.js" package
Plugin: vite:import-analysis

[netil]

Hi @Laurelin, this is related to the build/bundling environment you're working on.
From the dist package, src contains the source code and Plugin class is one of them. It provides .ts and .js extensions files.

I'm not sure the cause, but from the err message the vite:import-analysis failing resolving Plugin class file.
Try specifying extension on import statement.

import Plugin from 'billboard.js/src/plugin/Plugin.js';  // or Plugin.ts

If you can provide reproducible example will help to dig in more.

[Laurelin]

Hello! That import line fails to resolve in vite.

It's because your package.json exports don't specify it :

"exports": {
		".": {
			"types": "./types/index.d.ts",
			"import": "./dist-esm/billboard.js",
			"require": "./dist/billboard.pkgd.js"
		},
		"./dist/plugin/*": {
			"types": "./types/plugin/*.d.ts",
			"import": "./dist-esm/plugin/*.js",
			"require": "./dist/plugin/pkgd/*.js"
		},
		"./dist/*": "./dist/*"
	}

none of those refer to a /src/plugin.

When add this to the exports:

"./src/plugin/*":{
      "import": "./src/plugin/*.js"
    },

Vite resolves the plugin fine. I'm not quite sure on etiquette here; I can fork and make a PR for this. I'm also not sure if this does something that you all don't want happening. In particular, I notice that all the types on the Plugins are 'any' because ChartInternal is private(ish?) and none of the types it uses are exported.

So while I know that this.$$ in a plugin is a ChartInternal object, I have to mark it as an 'any' and can't rely on typescript hints to see what I can do with it. Are these things supposed to be public? Am I supposed to be developing plugins as a fork of billboard.js itself?

[netil]

@Laurelin, thanks for the comment.

There're no needs from the user perspective to import each files from /src, except the Plugin.js.
So, IMO pointing Plugin.js will be okay in general.

"exports": {
 	...  
 	"./src/Plugin/Plugin.js": "./src/Plugin/Plugin.js"
},

Can you make a PR for this?