unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.

Home Page:https://www.npmjs.com/package/unplugin-icons

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problems with esbuild bundling

cimchd opened this issue · comments

commented

Describe the bug

In a new project we use React and esbuild. I already used unplugin-icons several times with a vite/vue stack and was glad to be able to use it also for the new project with react/esbuild.

This is the esbuild config:

import * as esbuild from 'esbuild';
import Icons from 'unplugin-icons/esbuild';

esbuild.build({
    entryPoints: ['./src/index.ts'],
    bundle: true,
    outfile: './dist/bundle.js',
    platform: 'browser',
    format: 'esm',
    plugins: [Icons({ compiler: 'jsx', jsx: 'react' })],
    external: ['~icons'],
});

Then the following error occurs:

Could not resolve "react"

    unplugin-icons:~icons/mdi/home.jsx:1:23:
      1 │ import * as React from "react";
        ╵                        ~~~~~~~

  You can mark the path "react" as external to exclude it from the bundle, which will remove this
  error.

Because I want a complete bundle, setting react to external is not an option.
It seems to be the problem, that the import statement is injected after esbuild has already bundled the other react imports.
If I set the jsx option in esbuild config to 'preact' instead of 'react' the build finishs without errors (because the import of react is skipped), but the resulting bundle is not correct:

// bundle.js
// [...]

// unplugin-icons:~icons/mdi/home.jsx
var mdiHome = (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props }, /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: "M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z" }));
var home_default = mdiHome;

// index.jsx
function Test() {
  return React2.createElement("div", {}, "test");
}
function icon() {
  return /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(Test, null), /* @__PURE__ */ React2.createElement(home_default, null));
}

The correct react import is "React2", but the icon uses "React".

Reproduction

https://github.com/cimchd/esbuild-icons

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 18.03 GB / 23.47 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm

Used Package Manager

yarn

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.