Package output is missing .js extensions in imports when using Typescript

See original GitHub issue

Describe the problem

This is a Typescript problem (see this, and this), but package is affected by this because it produces ESM javascript.

Say your src/lib folder has two files in it: index.ts and store.ts. Your index.ts looks like this:

export { myStore } from './store'

When you compile with svelte-kit package, the result is this:

export { myStore } from './store'

Because there’s no .js file extension, this is will likely fail in ESM. SvelteKit projects seem to handle this fine (I’m not sure why), but projects using webpack for example will fail with the following error:

Module not found: Error: Can't resolve './store' in 'node_modules/your-lib'
Did you mean 'store.js'?
BREAKING CHANGE: The request './store' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Describe the proposed solution

Frustratingly, it seems Typescript’s stance on this is to add .js to your file extensions in your .ts files. This works when compiling through package, but will not work if you want to consume src/lib yourself within the kit project (i.e under /routes, if you wanted to set up docs or something).

The only way around this that I can think of is to add .js extensions in a post-compilation script. Similar to how tsc-esm does it. It’s dumb that kit has to care about this, but I think it’s going to be a common gotcha for many library authors otherwise.

Alternatives considered

  • Compiling to commonjs but… no thanks

Importance

would make my life easier

Additional Information

In that tsc-esm package, it uses a utility file from grubber to add the .js extensions. I wrote up a script and ran it against my package output:

import patchJsImports from '@digitak/grubber/library/utilities/patchJsImports.js'

patchJsImports('./package')

and it worked on everything except my index.js file, but I haven’t looked much further into that.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:2
  • Comments:25 (15 by maintainers)

github_iconTop GitHub Comments

2reactions
bluwycommented, Oct 22, 2021

Vite has plans to support importing .js in .ts files soon according to https://github.com/vitejs/vite/issues/3040#issuecomment-940697809

1reaction
dummdidummcommented, Jul 6, 2022

Could you create a new issue for this with a reproduction?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Typescript import are missing the .js extension when it ...
js in the ts file" – It is perfectly fine to have an import not end in .js . The import simply needs...
Read more >
TSConfig Reference - Docs on every TSConfig option
The value of extends is a string which contains a path to another configuration file to inherit from. The path may use Node.js...
Read more >
API - esbuild
In node, you can load a module using node --experimental-modules file.mjs . Note that node requires the .mjs extension unless you have configured...
Read more >
ts-node - npm
TypeScript execution environment and REPL for node.js, with source map ... Re-order file extensions so that TypeScript imports are preferred.
Read more >
Announcing TypeScript 4.7 - Microsoft Developer Blogs
This code works in CommonJS modules, but will fail in ES modules because relative import paths need to use extensions. As a result,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found