unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.
https://www.npmjs.com/package/unplugin-icons
MIT License
3.66k stars 131 forks source link

Problems with esbuild bundling #272

Open cimchd opened 1 year ago

cimchd commented 1 year ago

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