S
SolidJS•3w ago
hanvalen

minified UI library package code calling undefined map

Hi, I have a lot of apps I want to make this year, so figured I should make a UI library for myself so I don't have to make a button or footer or what have you for each app. I am pretty good at the computer, so not daunted, but I'm getting this issue I can't quite figure out on my own and jippity is not helping lol. Basically, I wrote some UI components using tailwind styles, eg: 
interface KickerProps {
    text: string;
}

export function Kicker({ text }: KickerProps) {
    return (
        <div class="flex gap-[12px] px-[12px] py-[6px] rounded-[6px] text-[16px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] max-w-[fit-content]">
            <p>{text}</p>
        </div>
    );
}
interface KickerProps {
    text: string;
}

export function Kicker({ text }: KickerProps) {
    return (
        <div class="flex gap-[12px] px-[12px] py-[6px] rounded-[6px] text-[16px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] max-w-[fit-content]">
            <p>{text}</p>
        </div>
    );
}
This is just a lil guy that puts some text in a box for use in Heroes and Product Cards and such. I got the thing built, doin all the umd.js and es.js stuff, types are compiling, I get my intellisense in VS Code to import the stuff, but the lib.es.js file is like... broken? I guess? In the dist code, there's a function like 
function y(t) {
  let i, e;
  return !B() || !(i = p.registry.get(e = a())) ? t() : (p.completed && p.completed.add(i), p.registry.delete(e), i);
}
function y(t) {
  let i, e;
  return !B() || !(i = p.registry.get(e = a())) ? t() : (p.completed && p.completed.add(i), p.registry.delete(e), i);
}
Where p is an alias for the sharedConfig from solid-js - at run time, p.registry is undefined, so I'm calling .get() on undefined, which suuuucks. Idk why the lib.es.js is doing this, and to be completely honest this may be more of a vite thing than a solid thing, but if anyone else has done something similar and seen this before I would have approximately infinite high fives for such a person Another important detail may be that the consuming project is solid start - these metaframeworks are really important for doing SEO and SEO is an important part of lobster-trap apps so TLDR; Working on a UI library, can't use/test it because of weirdness in minified dist code
2 Replies
thetarnav
thetarnav•3w ago
the "weirdness" is in the built library? how are you building it then? also why is is minified? is this the code after it's being bundled by solid start? does it work fine in dev? it shouldn't minify the code in dev or are you minifying the library output? im a bit confused if you are makin a library only for yourself you might as well not have a built step at all and just put your source .tsx or .jsx files in package.json should save you some trouble
hanvalen
hanvalenOP•3w ago
meow thanks ill try these out I changed the package.json, 
"files": [
"dist"
],
"files": [
"dist"
],
to 
"files": [
"dist",
"src",
],
"files": [
"dist",
"src",
],
and that just works now lol, some other stuff abt pointing the import requests to src rather than dist/lib.es.js so this is likely a vite issue and not solid, but those things are kissing so it may be both

Did you find this page helpful?