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.
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:
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:
Then the following error occurs:
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:
The correct react import is "React2", but the icon uses "React".
Reproduction
https://github.com/cimchd/esbuild-icons
System Info
Used Package Manager
yarn
Validations