#SolidJS UI library + Astro

29 messages · Page 1 of 1 (latest)

mystic forum
#

Hey, would anyone happen to have experience using a UI library together with Astro?

I can get it working if I just export some simple components, but if I then add an import to another SolidJS library (eg. @kobalte/core or @ark-ui/solid to help build my primitives), then I run into:

The requested module 'solid-js/web' does not provide an export named 'effect'

At first I was using tsup with tsup-preset-solid, but at this point I’ve tried almost everything I can think of: rollup, vite, esbuild, or just plain tsc. On the other hand, tried a bunch of different Astro configs, but no matter what I do I can’t get past this error.

Are there any example projects with such a setup somewhere?

fathom patio
#

not an astro expert, but from what i have seen on this discord, i think u have to add @kobalte/core to noExternal

mystic forum
fathom patio
#

if you were using astro + solid + kobalte all in a single Astro app
that's not what you want? i might not understand the question then 🙂

simple mason
mystic forum
mystic forum
# mystic forum it is, I just mean that `noExternal` might be the workaround if you directly con...

my vague impression is that tsup-preset-solid is the most up to date way to set up UI libraries with solid right now. the config I ran looked like this:

import { defineConfig } from 'tsup';
import * as preset from 'tsup-preset-solid';

const presetOptions: preset.PresetOptions = {
  entries: [
    {
      // Entries with a '.tsx' extension will have a generated `solid` export
      // condition.
      entry: 'src/index.tsx',
    },
  ],
};

export default defineConfig(config => {
  const parsedOptions = preset.parsePresetOptions(
    presetOptions,
    !!config.watch,
  );

  const packageFields = preset.generatePackageExports(parsedOptions);
  preset.writePackageJson(packageFields);

  return preset.generateTsupOptions(parsedOptions);
});

this automatically writes these properties to the package.json (including a condition for solid - but it'd still end up with the export error above)

  "main": "./dist/index.js",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    "solid": "./dist/index.jsx",
    "import": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    }
  },
  "type": "module",
  "browser": {},
  "typesVersions": {}
simple mason
#

Are you planning on actually publishing your library to npm?

mystic forum
#

Yeah, but it’s part of a closed source monorepo for now. Are you thinking of instead eg linking the unbuilt TS via pnpm? I tried that thinking it’d for sure resolve the issue, but weirdly enough I still encountered the exports error

simple mason
mystic forum
simple mason
#

@macrograph/web imports @macrograph/interface which imports @kobalte/core

#

didn't need noExternal but do have a solid export condition in @macrograph/interface

image.png
mystic forum
# simple mason didn't need `noExternal` but do have a `solid` export condition in `@macrograph/...

were you using the same package.json before converting to solid start? I get an error when importing the ui lib

The path "." is not currently exported by package "@org/ui":

if i then add a condition for import, it goes away but i then get the original error message The requested module 'solid-js/web' blah blah

  "main": "./src/index.tsx",
  "exports": {
    ".": {
      "solid": "./src/index.tsx",
      "import": "./src/index.tsx",
      "types": "./src/index.tsx"
    }
  },
  "type": "module"
simple mason
#

that screenshot is the package.json at the time of using astro

mystic forum
simple mason
#

no worries, hope you get it working

fathom patio
#

@west prawn would u mb know the answer to this one?

mystic forum
#

@simple mason @fathom patio finally got it working, but anticlimactically, i can't track down what actually got it working. i have an earlier commit where i'm running the same configs, so i'm leaning towards something weird being stuck in the dist or node_modules dirs

the final working config (package.json in the ui lib):

  "scripts": {
    "build": "tsup",
  },
  "type": "module",
  "main": "./dist/index.js",
  "exports": {
    ".": {
      "solid": "./dist/index.jsx",
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      }
    },
    "./styles": "./dist/index.css"
  },
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "browser": {},
  "typesVersions": {}

tsup config:

import { defineConfig } from 'tsup';
import * as preset from 'tsup-preset-solid';

const presetOptions: preset.PresetOptions = {
  entries: [
    {
      // Entries with a '.tsx' extension will have a generated `solid` export
      // condition.
      entry: 'src/index.tsx',
    },
  ],
};

export default defineConfig(config => {
  const parsedOptions = preset.parsePresetOptions(
    presetOptions,
    !!config.watch,
  );

  return preset.generateTsupOptions(parsedOptions);
});

astro config is completely stock (no noExternal or anything like that)

thanks again for the help 🙏

simple mason
#

weird, at least it works now haha

mystic forum
#

well shit, turns out it wasn't working at all. the issue happens when importing the UI library (that is using kobalte) in a .ts file that is then imported by a .astro file. any imports directly in the .astro file work fine

even if all the exports from the UI library are hardcoded to point to the .jsx output, it still errors with No matching export in "../../node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js" for import "effect"

it's strange how the file type has an effect on how the import behaves. you wouldn't happen to know anything about this @simple mason? i'll likely end up refactoring the ui library to export the unbuilt TS, but it's a shame that it's such a pain to get a library working if you want the build process encapsulated within the lib

west prawn
mystic forum
simple mason
mystic forum
simple mason
#

yeah sure