Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
fwextensions opened this issue Oct 9, 2023 · 4 comments
Labels
bug Something isn't working

Comments

@fwextensions
Copy link

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
Copy link
Author

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.

@yuanqing yuanqing added the bug Something isn't working label Oct 17, 2023
@devinhalladay
Copy link

Any luck? I'm having this issue too

@fwextensions
Copy link
Author

fwextensions commented Jan 1, 2024

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
Copy link

te6-in commented Sep 19, 2024

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",
  }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants