Importing UI components from a package and then rendering them causes esbuild error

[fwextensions]

I'm trying to create a package of UI components that are built from components in @create-figma-plugin/ui. In another project, I'm importing that package and trying to use it. If I import anything from that package, even something that isn't from a .tsx file, I get this error:

info Building...
error esbuild error
    Build failed with 1 error:
    node_modules/@create-figma-plugin/ui/lib/utilities/render.js:1:7: ERROR: Could not resolve "!../css/base.css"

If I edit the render.js file to remove the !, then the build completes successfully. I'm not sure what the ! is supposed to be doing there, but it may not be necessary. It seems like importing components from outside the node_modules/@create-figma-plugin/ui/ hierarchy leaves some esbuild path in a bad state, at which point trying to import from a bang path throws an error.

[fwextensions]

I also can't seem to get .css files that are included with the installed package to be built into the plugin when running build-figma-plugin, so it seems like CSS handling is a little wonky when non-CFP packages are involved.

[devinhalladay]

Any luck? I'm having this issue too

[fwextensions]

I gave up and just distributed the unbuilt source files with my fwidgets package. When they're imported and the plugin is built, everything works fine. This template repo is an example of using the package in a plugin.

One thing that won't work is using alias paths in the tsconfig.json file when importing modules. I started out using them in the package and then had to remove them, since they weren't getting replaced by the built output. (Maybe there's a way of automatically replacing all of them as a build step, though...)

[te6-in]

It seems like it's been a while since this issue was raised, but I somehow fixed the same issue so I wanted to share this.
I just replaced the import with the matching CSS file using the esbuild config. I'm still not sure why this alias setting should be in the main options, not the ui one.

// build-figma-plugin.main.js

module.exports = (buildOptions) => ({
  ...buildOptions,
  alias: {
    "!../css/base.css":
      "../node_modules/@create-figma-plugin/ui/lib/css/base.css",
  }
});