Imports not working in monorepo

[samhenderson511]

I'm moving a Next.js project to a Turborepo project, and have extracted my icon components to a shared UI library so that other components and pages can use them.

I have these dependencies in the ui package

  "dependencies": {
    "@material-symbols/svg-300": "^0.8.1",
    "@material-symbols/svg-400": "^0.8.1",

And I'm trying to use them here

"use client";
import Menu from "@material-symbols/svg-300/outlined/menu.svg";
import Call from "@material-symbols/svg-400/outlined/call.svg";
import Wifi from "@material-symbols/svg-400/outlined/wifi.svg";

But typescript is throwing
Cannot find module '@material-symbols/svg-300/outlined/menu.svg' or its corresponding type declarations.

I get TypeScript completion on the import until /outlined/ but not for any of the SVG files.

I've tried using this method from Webpack but still get the import error. Here's the structure I've tried:

• apps
• • web
• packages
• • ui
• • • Icon
• • • • Icon.tsx (using the components)
• • • • icons.ts (importing and exporting the SVGs as components)
• • • • index.d.ts (declare module '*.svg' {...)
• • • • index.ts

[marella]

I'm not familiar with Turborepo, but if you are creating a separate ui package, don't you have to specify the types in package.json under the types field:

  "types": "Icon/index.d.ts",

May be the ui/Icon/index.d.ts isn't automatically read by the framework and needs to be specified somewhere in config.