Use file extensions in imports for ESM compliance

[josundt]

The billboard.js package claims to be an ESM package; the package.json "type" property is "module", and it also has an "exports" property listing the ESM exports.

From TypeScript v4.7, the TypeScript compiler also supports resolving ESM packages correctly when the compiler option "moduleResolution" is set to "nodenext"/"node16". With this compiler option value, the compiler will correctly use the "exports" property/section when resolving modules/types from packages .

billboard.js package already has the "types" property correctly set in the different "exports" sections.
But for the package to be a true ESM package, all import startements in .ts files need to use file extensions when importing modules from file paths. All imports of .js (or .ts) file modules need to specify the .js file extension.

Read more in TypeScript release announcement

When imports are not using file extensions, the package is not a valid ESM package, and TypeScript projects that consume the package cannot set the "moduleResolution" compiler option is to "nodenext"/"node16", which is preferable for ESM.

It should be fairly simple to fix this, just append ".js" to all file path import statements.

I have some experience in migrating TypeScript package projects to ESM compliance, and have two tips that helps avoiding mistakes with import extensions.

1. If you are using VS Code, add a .vscode/settings.json file, and add the following property to the JSON to ensure that auto-resolved imports always get the .js file extension:

{
  //...
  "typescript.preferences.importModuleSpecifierEnding": "js",
  //...
}

2. I also recommend using the eslint plugin eslint-plugin-import + eslint-import-resolver-typescript (read more) to ensure that missing extensions in imports give eslint errors. From .eslintrc:

{
    "extends": [
        "plugin:import/typescript"
    ],
    "plugins": [
        "import"
    ],
    "rules": {
        "import/extensions": [ // Ensure all local .ts file imports use .js extension
            "error",
            "ignorePackages"
        ]
    }
}

[lrdiv]

@josundt Do you know of any workarounds for this? I'm using 2.2.7 of billboard.js with TS 4.6.4 and this is causing build errors