create-figma-plugin icon indicating copy to clipboard operation
create-figma-plugin copied to clipboard

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

Open fwextensions opened this issue 8 months ago • 3 comments

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 avatar Oct 09 '23 18:10 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.

fwextensions avatar Oct 09 '23 19:10 fwextensions

Any luck? I'm having this issue too

devinhalladay avatar Dec 31 '23 04:12 devinhalladay

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...)

fwextensions avatar Jan 01 '24 00:01 fwextensions