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.js1.56KB

SolidJS•3y ago•

11 replies

undefin3d3

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>
  );
}

vite.config.js1.56KB

Problem with bundled UI library

Similar Threads

Problem with bundled UI library

Similar Threads

Similar Threads

Similar Threads