search

chakra-ui / ark

Ark UI is a headless UI library with over 45+ components designed to build scalable Design Systems that works for a wide range of JS frameworks.
https://ark-ui.com
MIT License
3.83k stars 113 forks source link

Import not found with moduleResolution set to nodenext #2953

Closed stellarhoof closed 1 month ago

stellarhoof commented 1 month ago

Description

Setting tsconfig.json's moduleResulution to nodenext causes various imports to not resolve.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/twilight-grass-lygf9y

Steps to Reproduce

  1. Go to provided sandbox
  2. Navigate to src/App.tsx
  3. Verify that the imported type PolymorphicProps cannot be resolved.

Ark UI Version

4.1.0

Framework

Browser

Brave

Additional Information

No response

cschroeter commented 1 month ago

@stellarhoof

Please use "moduleResolution": "bundler" This setting is tailored for use with bundlers like Vite, Webpack, and similar tools.

stellarhoof commented 1 month ago

Thanks for the prompt reply @cschroeter

A library should make no assumption on the technology used by consumers. For example I have a dedicated package just for styling ark components which publishes the emitted typescript files and have no need for bundling.

Also, the bug is present even if a bundler is used because this is about TypeScript not being able to resolve the imports.

The fix is to publish files with fully resolved imports. Ex:

// Assume the following structure: "bar/baz/index.js"

// Not fully resolved import
import { foo } from "./bar/baz"

// Fully resolved import
import { foo } from "./bar/baz/index.js"
cschroeter commented 1 month ago

Thanks for the detailed explanation. Feel free to file a PR if you have a concrete solution in mind