Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problems with esbuild bundling #272

Open
5 tasks done
cimchd opened this issue Mar 7, 2023 · 0 comments
Open
5 tasks done

Problems with esbuild bundling #272

cimchd opened this issue Mar 7, 2023 · 0 comments

Comments

@cimchd
Copy link

cimchd commented Mar 7, 2023

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant