Skip to content
This repository has been archived by the owner on Mar 10, 2024. It is now read-only.

Support pure ESM with TypeScript #66

Closed
chasingmaxwell opened this issue Dec 28, 2021 · 13 comments · Fixed by #67
Closed

Support pure ESM with TypeScript #66

chasingmaxwell opened this issue Dec 28, 2021 · 13 comments · Fixed by #67
Labels

Comments

@chasingmaxwell
Copy link
Contributor

I'm migrating a TypeScript project to output pure ESM. As part of that effort, I need to update every import which was previously extensionless, to specify a ".js" extension (even though the file in the source directory has a ".ts" extension). Like this:

// old way
import aThing from '../a/module';

// new way
import aThing from '../a/module.js';

It seems like unimported is unable to determine that ../a/module.js should be resolved to ../a/module.ts and so it reports almost all files as being unimported.

I've been referencing this guide for the migration to pure ESM.

@smeijer
Copy link
Owner

smeijer commented Dec 28, 2021

I think resolve always tries to resolve the import using the path + one of the allowed extensions. To support this case, we might need to check for the direct import first, before we pass the path to resolve.

Maybe we can add something right before the fallback:

unimported/src/traverse.ts

Lines 141 to 145 in b849105

// if nothing else works out :(
return {
type: 'unresolved',
path: path,
};

// scratch / pseudo
try {
  const extension = config.extension.find(extension => path.endsWith(extension));
  if (extension) {
    return {
      type: 'source_file',
      path: resolve.sync(path.slice(0, -extension.length), {
        basedir: cwd,
        extensions: [extension],
        moduleDirectory: config.moduleDirectory,
      }).replace(/\\/g, '/'),
    }
  }
} catch (e) {}

@chasingmaxwell
Copy link
Contributor Author

Looks like we'll have to add that in a few places though if we want it to work with aliases and module-relative paths as well.

@chasingmaxwell
Copy link
Contributor Author

I could see it being applied to all relative paths across the board, but enabled with config. Either in a very targeted way with "esm": true or maybe more open-ended with regex path transformations or something "pathTransforms": { "/\.js/", ".ts" }.

@smeijer
Copy link
Owner

smeijer commented Dec 28, 2021

I'm curious if it would "just work" if we were to add an empty extension to the array. Like ['.js', '.tsx', '']

@chasingmaxwell
Copy link
Contributor Author

When I tried that I received a "Failed parsing util" error message with exit code 1.

@chasingmaxwell
Copy link
Contributor Author

I have it working for my project with an added pathTransforms config property. If that sounds good to you, I can create a pull request.

@smeijer
Copy link
Owner

smeijer commented Dec 29, 2021

A pull would be sweet! Thanks.

chasingmaxwell added a commit to chasingmaxwell/unimported that referenced this issue Dec 29, 2021
@chasingmaxwell
Copy link
Contributor Author

I created the PR. A couple notes about tests:

  1. I could not get all the tests to pass locally (even on the main branch with no changes). It seems there might be a compatibility issue with my environment.
  2. I did not create any new tests. It was unclear to me where the test should be added. Maybe just a new scenario to the cli integration tests? If you can provide some guidance there I'll add a test for handling the new configuration property.

@chasingmaxwell
Copy link
Contributor Author

Here's a PR to fix the build/test failures I was seeing on the main branch: #69

@chasingmaxwell
Copy link
Contributor Author

I've also added a test for the pathTransforms config in my PR #67

chasingmaxwell added a commit to chasingmaxwell/unimported that referenced this issue May 2, 2022
@chasingmaxwell
Copy link
Contributor Author

@smeijer thank you for merging #69 (and sorry I never got back around to addressing your feedback). Now the checks for #67 are passing. If that's good to merge it'll close out this issue.

smeijer added a commit that referenced this issue Nov 15, 2022
* feat: add regex path transformation

This is useful for TypeScript projects outputing pure ESM.

See https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#how-can-i-make-my-typescript-project-output-esm.

Closes #66.

* test: add assertion for new pathTransforms config

* fix: use String.prototype.replace()

Co-authored-by: Stephan Meijer <stephan.meijer@gmail.com>
@smeijer
Copy link
Owner

smeijer commented Nov 15, 2022

🎉 This issue has been resolved in version 1.23.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@maclockard
Copy link

Ran into an issue using this solution with .tsx, filed here: #163

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants