[Bug?]: Effects and Events do not run importing a Lucide Solid Icon.

[askides]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

If i write these lines of code:

import { createEffect } from "solid-js";
import { DatabaseZapIcon } from "lucide-solid";
import { Alert } from "~/components/ui/alert";

export default function Page() {
  createEffect(() => {
    console.log("Running Effect!");
  });

  return (
    <main class="max-w-lg mx-auto">
      <form method="post" class="space-y-5">
        <Alert class="rounded-lg border-2 border-emerald-500">
          <DatabaseZapIcon class="shrink-0" />
        </Alert>

        <button type="button" onClick={() => console.log("Clicked!")}>
          Submit
        </button>

        <input type="text" onInput={() => console.log("Typed!")} />
      </form>
    </main>
  );
}

No console logs will be printed, nether for effect or events.

But everything start working perfectly just commenting the icon.

import { createEffect } from "solid-js";
import { DatabaseZapIcon } from "lucide-solid";
import { Alert } from "~/components/ui/alert";

export default function Page() {
  createEffect(() => {
    console.log("Running Effect!");
  });

  return (
    <main class="max-w-lg mx-auto">
      <form method="post" class="space-y-5">
        <Alert class="rounded-lg border-2 border-emerald-500">
          {/* <DatabaseZapIcon class="shrink-0" /> */}
        </Alert>

        <button type="button" onClick={() => console.log("Clicked!")}>
          Submit
        </button>

        <input type="text" onInput={() => console.log("Typed!")} />
      </form>
    </main>
  );
}

Expected behavior 🤔

The expected behavior is the correct running of the effect, and the correct event dispatching of the button click and the input type.

Steps to reproduce 🕹

Described in the "Current Behavior" tab above.

Context 🔦

No response

Your environment 🌎

System:
  OS: macOS 13.2.1
  CPU: Apple M1
Binaries:
  Node: v18.17.1
  PNPM: v8.7.0
npmPackages:
  solid-start => ^0.3.5

[edivados]

Can't reproduce. Effect runs regardless of the icon's presence.
Do you have the same problem on build or is it only in dev? If you have a repo for reproduction that would be helpful.

Something else I noticed is that in dev all icons are loaded resulting in 1k+ file requests and slowing everything down quite a lot for me. It takes like a couple of seconds until I see the console log. I am assuming this has to do with vite not treeshaking in dev.

My env:

Template: bare, ts, ssr
System:
  OS: Windows 10
Binaries:
  Node: v20.5.1
  PNPM: v8.7.0
npmPackages:
  solid-start: ^0.3.5
  lucide-solid: ^0.274.0

[askides]

I did some tests, and the problem only occurs in dev, and not in build.

I also confirm the problem you are pointing out that I had not noticed, it is actually downloading the entire list of icons.

I attach screenshots for clarity:

For the repo also I have posted the source, here is the link to the route that is giving problems:

https://github.com/askides/solid-start-debug/blob/main/src/routes/test.tsx

[edivados]

Doesn't look to me like this is something that can be solved in solid-start.

I looked around a bit on the lucide repo and found two issues mentioning this problem but related to svelte.
lucide-icons/lucide#1284
lucide-icons/lucide#1475

Interestingly for svelte it seems to be possible to import a single icon directly which should solve the problem.. I would suggest to look/ask on the repo there.

Edit: Tested also your repo just to make sure. Same result. It just takes a couple seconds before the console log shows up.

[ryansolid]

In setting up for SolidStart's next Beta Phase built on Nitro and Vinxi we are closing all PRs/Issues that will not be merged due to the system changing. If you feel your issue was closed by mistake. Feel free to re-open it after updating/testing against 0.4.x release. Thank you for your patience.

See #1139 for more details.

[Christopher2K]

I have a workaround @edivados for the bundling issue using v0.4.x

1. In vite.config.ts, we will create the virtual path lucide-solid/icons point to the actual .jsx icons files.

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  resolve: {
    alias: {
      "lucide-solid/icons": fileURLToPath(
        new URL(
          "./node_modules/lucide-solid/dist/source/icons",
          import.meta.url
        )
      ),
    },
  },
});

2. To enable TS support, create a @types/lucide.d.ts in your src folder

declare module "lucide-solid/icons/*" {
  import { LucideProps } from "lucide-solid/dist/types/types";
  import { Component } from "solid-js";
  const cmp: Component<LucideProps>;

  export = cmp;
}

3. Your dev server is fast again!

Before:

After: