Problems with esbuild bundling
cimchd opened this issue · comments
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.