TS2742 type annotation necessary for basic usage

[djMax]

Description

When converting from vanilla-extract/sprinkles to rainbow-sprinkles, Typescript 5.2 gets tripped up with a confusing error:

The inferred type of 'sprinkles' cannot be named without a reference to '../../node_modules/rainbow-sprinkles/dist/declarations/src/createRuntimeFn'. This is likely not portable. A type annotation is necessary.ts(2742)

Expected Behaviour

Proper inferred typing.

Actual Behaviour

typescript build fails

Affected Version

0.17.0

Steps to Reproduce

Possibly the tsconfig?

  "compilerOptions": {
    "incremental": true,
    "lib": [
      "ES2022",
      "DOM"
    ],
    "target": "ES2022",
    "module": "NodeNext",
    "allowJs": true,
    "preserveWatchOutput": true,
    "outDir": "dist/",
    "strict": true,
    "declaration": true,
    "sourceMap": true,
    "isolatedModules": true,
    "moduleResolution": "NodeNext",
    "baseUrl": "./src",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "paths": {
      "@/*": [
        "./*"
      ]
    },
    "noEmit": true,
    "skipLibCheck": true
  }

Checklist

• I have read the contributing guidelines
• I have verified this does not duplicate an existing issue

[yyyyaaa]

@djMax hey! I also have the same problem, try putting this inside of your paths in tsconfig.json. Also modify the actual relative path to your node_modules. This solves it for me:

    "paths": {
      "@/*": ["./src/*"],
      "rainbow-sprinkles": ["../../node_modules/rainbow-sprinkles/"]
    }

Source: microsoft/TypeScript#29808 (comment)

[kysley]

Also getting this behaviour- only when "moduleResolution": "NodeNext" is set though

[kirstbew]

Having this issue too with using "NodeNext". Using rainbow-sprinkles@0.17.2

Looking into this I found a similar issue in Vanilla Extract - vanilla-extract-css/vanilla-extract#739
As they say here vanilla-extract-css/vanilla-extract#739 (comment)

"export the SprinklesFn type, then typescript will be able to find and infer the type"

Hacking the package to export the type does make the issue go away. E.g.

export { defineProperties } from "./defineProperties.js";
export { createRainbowSprinkles } from "./createRainbowSprinkles.js";
export type { SprinklesFn } from "./createRuntimeFn.js";

Now it shows the Sprinkles type for my Box component instead of 'any':

App usage:

Could adding export type { SprinklesFn } from './createRuntimeFn' to index.ts file be a solution?

[roginfarrer]

Merged in #153. Let me know if that helps.

[yyyyaaa]

this bug is actually still occuring with TS 5.5 with moduleResolution: "Bundler", I can't figure out why yet. Does anyone know why "Bundler" mode causes it?