Failed to import - @twind/preset-tailwind, incorrect file, all files are the same as main entrypoint

[KyleJune]

Failing module

• GitHub: https://github.com/tw-in-js/twind/blob/main/packages/preset-tailwind/src/colors.ts
• npm:https://www.npmjs.com/package/@twind/preset-tailwind

import { gray, blue } from "https://esm.sh/v107/@twind/preset-tailwind@1.1.4/deno/colors.development.js";

That line is copied from https://esm.sh/v107/@twind/preset-tailwind-forms@1.1.2/deno/preset-tailwind-forms.development.js. I depend on preset-tailwind-forms and it tries to import colors from preset-tailwind.

If you look at that colors file on github, it just exports a couple consts for different color names, like gray and blue.

https://github.com/tw-in-js/twind/blob/main/packages/preset-tailwind/src/colors.ts

The problem appears to be that https://esm.sh/v107/@twind/preset-tailwind@1.1.4/deno/colors.development.js is actually the same as https://esm.sh/v107/@twind/preset-tailwind@1.1.4/deno/preset-tailwind.development.js which is the main entrypoint for @twind/preset-tailwind.

So it's incorrectly returning the bundle for the main entrypoint for the package when trying to import the colors file from within the package.

Here is the main entrypoint file on github.

https://github.com/tw-in-js/twind/blob/main/packages/preset-tailwind/src/index.ts

Error message

After running deno run I got this:

error: Uncaught SyntaxError: The requested module '/v107/@twind/preset-tailwind@1.1.4/deno/colors.development.js' does not provide an export named 'blue'
import { gray, blue } from "/v107/@twind/preset-tailwind@1.1.4/deno/colors.development.js";

Additional info

• esm.sh version: v107
• Deno version: 1.30.3

I tried with many different versions of esm.sh and all appeared to have the same problem.

[KyleJune]

It looks like this failure doesn't happen with all files in that package. The defaultTheme file appears to be different. Not sure why the colors file is the same as the main entrypoint but the defaultTheme file is different.

https://esm.sh/v107/@twind/preset-tailwind@1.1.4/deno/defaultTheme.development.js

[KyleJune]

For anyone looking for a workaround, copy the preset-tailwind-forms.ts and preset-tailwind-forms.js files locally, then replace the problematic colors import with the original raw file from github like shown below. preset-tailwind-forms will work with the original file from github but will not work with https://esm.sh/v107/@twind/preset-tailwind@1.1.4/deno/colors.development.js.

/* esm.sh - esbuild bundle(@twind/preset-tailwind-forms@1.1.2) deno development */
// esm-build-981dc78744cb3fcda5b7fdd95f343e84bfe76b03-704d065e/node_modules/@twind/preset-tailwind-forms/preset-tailwind-forms.js
import { toColorValue } from "https://esm.sh/v107/@twind/core@1.1.3/deno/core.development.js";
import { gray, blue } from "https://raw.githubusercontent.com/tw-in-js/twind/main/packages/preset-tailwind/src/colors.ts";
import defaultTheme from "https://esm.sh/v107/@twind/preset-tailwind@1.1.4/deno/defaultTheme.development.js";

[ije]

thanks！i will look into it

[ije]

twind generates a lot of dist files for exports, includes deno, that's great IMO, but some of the dists are just alias like `export * from "./color.js"`, that esbuild can't get the exports correctly. before i tried to fix it but make a mistake, now it works

will release v108 later

[KyleJune]

Thanks for the quick fix.