How to configure SVGR in a tsup package inside a turborepo

[kriptonian1]

So I was working on a project where I wanna setup svgr inside a tsup package in turborepo.

This is my tsup config

import type { Options } from "tsup";
import { defineConfig } from "tsup";

export default defineConfig((options: Options) => ({
  plugins: [],
  treeshake: true,
  splitting: true,
  entryPoints: ["./**/*.tsx"],
  // format: ["esm"],
  dts: true,
  minify: true,
  clean: true,
  externals: ["react"],
  ...options,
}));

and this is my folder structure

my-turborepo-project/
|-- app/
|   |-- web/
|   |-- docs/
|-- packages/
|   |-- ui/
|   |   |-- components/
|   |   |-- tsup.config.ts
|   |   |-- tailwind.config.mjs
|   |   |-- tsconfig.json
|   |-- tailwind-config/
|   |-- tsconfig/
|   |-- eslint-config/
|-- tsconfig.json
|-- turbo.json
|-- pnpm-workspace.yaml
|-- pnpm-lock.yaml
|-- package.json
|-- .gitignore

[kevinwaelkens]

@kriptonian1 I was having issues using the next.js webpack loader for @svgr/webpack. I have a frontend/packages/icons package from which I'd only like to export svg files, but when I tried to import those in my frontend/apps/subscriptions app I got the error that react couldn't be resolved. I assumed adding react to the peerDependencies of the icons package would resolve the issue, but it didn't. Adding react to the dependencies of the icons package did resolve the issue, but that kind of stings because I would've liked to keep the icons package to only export svg files. It works this way though, for me.

[sb2nov]

Ping on this?