Relative import paths need explicit file extensions in EcmaScript imports

Open
#110 0 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
42/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start by reproducing the reported tsc build with TypeScript 4.7 or 4.9, moduleResolution NodeNext, and @formkit/auto-animate/react. Inspect the generated @formkit/auto-animate/react/index.d.ts and its import of ../index; done when a consuming React package builds without TS2835 under the stated configuration.

Written by the indexing model from the issue text.

Description

I tried adding auto-animate to a react package that is built and exported for use in another repo. The build step for the package looks like this tsc && babel ./src --extensions '.js,.jsx,.ts,.tsx'.

However, during the build, I get a typescript error

error TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution'
is 'node16' or 'nodenext'. Did you mean '../index.mjs'?

2 import { AutoAnimateOptions, AutoAnimationPlugin } from "../index";
                                                          ~~~~~~~~~~

Found 1 error in node_modules/@formkit/auto-animate/react/index.d.ts:2

For reference, the tsconfig.json file looks like this (abbreviated for clarity):

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"],
    "target": "ESNext",
    "module": "commonjs",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "moduleResolution": "NodeNext"
    "baseUrl": ".",
    "resolveJsonModule": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

This is using:

"@formkit/auto-animate": "^1.0.0-beta.5",
"react": "18.0.0",
"typescript": "4.7.4"

But the issue was also reproduced with "typescript": "4.9.3" and also trying to use other versions of auto-animate 1.0.0-beta.1 and 1.0.0-beta.3

Is there any way for me to use auto-animate right now? I'd be open to changing my tsconfig or adding some plugin to make this work.

Dominant language
TypeScript
Stars
13.9k
Forks
260
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from formkit/auto-animate

All issues in formkit/auto-animate

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.