SolidJS•12mo ago

Problem with bundled UI library

Hi Guys! I have a problem with my UI library: I have super simple component like this:

const P = (props: { t: Accessor<string> }) => <p>{props.t()}</p>;

const P = (props: { t: Accessor<string> }) => <p>{props.t()}</p>;

But unfortunately once im trying to use this component from bundled ui library the "t" props doesn't change

import { P } from "ui";

export function Accordion() {
  const [expanded, setExpanded] = createSignal(false);
  const title = createMemo(() => (expanded() ? "Expanded" : "Collapsed"));
  return (
    <div class="accordion">
        <div
          class={"accordion__header"}
          onClick={() => {
            setExpanded(!expanded());
          }}
        >
          <P t={title} /> 
        </div> 
    </div>
  );
}

import { P } from "ui";

export function Accordion() {
  const [expanded, setExpanded] = createSignal(false);
  const title = createMemo(() => (expanded() ? "Expanded" : "Collapsed"));
  return (
    <div class="accordion">
        <div
          class={"accordion__header"}
          onClick={() => {
            setExpanded(!expanded());
          }}
        >
          <P t={title} /> 
        </div> 
    </div>
  );
}

If im trying to do the same things using <P/> as local component (not imported from the "ui" library) everything works as expected I guess it might be a problem with bundling but I don't know exactly what can cause the problem I've mentioned Also sharing vite.config from "ui" library im using during build Does anyone faced same issue? Please, help

vite.config.js

8 Replies

apollo79•12mo ago

I am not sure but it could be, that you are using two different versions of solid However, it is not common to pass accessors to components, normally one does { t: string } and then calls it like <P t={title()} />

undefin3d3•12mo ago

Got it, thanks Btw using same version of solid library doesn't solve an issue

itsyoboieltr•12mo ago

same for me, if I bundle my ui library, it does not work, if I copy the exact same source code into the project, then the same component works...

undefin3d3•12mo ago

@itsyoboieltr I've found out the issue I've built my ui library using rollup and "rollup-preset-solid" plugin Here is rollup.config.js

import withSolid from "rollup-preset-solid";
import sass from "rollup-plugin-sass";

export default withSolid({
  input: "src/index.ts",
  targets: ["esm", "cjs"],
  plugins: [
    sass({
      output: "./dist/style.css",
      failOnError: true,
    }),
  ],
});

import withSolid from "rollup-preset-solid";
import sass from "rollup-plugin-sass";

export default withSolid({
  input: "src/index.ts",
  targets: ["esm", "cjs"],
  plugins: [
    sass({
      output: "./dist/style.css",
      failOnError: true,
    }),
  ],
});

After that library works as expected It might be a bug with vite-plugin-solid, or vite itself, so for now try to build via rollup Hope, it helps

itsyoboieltr•12mo ago

When bundled with rollup, my code fails to bundle.. Do you think there is a way to do it with vite?

undefin3d3•12mo ago

not sure, I think you are able to fix errors during bundling What kind of error did you get?

itsyoboieltr•12mo ago

I got vite bundling to work 😄 I needed to add:

build: {
  ...
  rollupOptions: { external: ['solid-js'] },
},

build: {
  ...
  rollupOptions: { external: ['solid-js'] },
},

this fixed everything for me somehow @vg I guess it was bundling the solidjs runtime and that caused some issues

undefin3d3•12mo ago

thank you!

Gaming

Programming

Problem with bundled UI library