Suggestion: Update figma/plugin-examples

Plugin and Widget API Feedback
1

html-webpack-inline-source-plugin is no longer maintained, as reported in this issue on GitHub.

So I think it needs to update the example that uses webpack in figma/plugin-examples. This will also allow you to upgrade to webpack@5. It can do these by following these steps.

  1. Uninstall html-webpack-inline-source-pluginand install react-dev-utils.
  2. Update html-webpack-plugin to v4 or higher.
  3. Update webpack.config.js of each project to look like the following source code.
// ---
const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");

module.exports = (env, argv) => ({
  // ---
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/ui.html",
      filename: "ui.html"
    }),
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
  ],
});
  1. After confirming that the build is successful, upgrade webpack to v5 and other packages.

I look forward to feedbacks, Thx.

2

Thanks for the update. After following the steps webpack and updating as per your suggestion, I was getting an error that ‘onclick’ was on null for the ‘create’ button element. But it resolved as per the issue in this thread by including code as

new HtmlWebpackPlugin({
    template: './src/ui.html',
    filename: 'ui.html',
    chunks: ['ui'], // new code
    inject: 'body' // new code
}),

Can you please explain why the above new code chunks: ['ui'], inject: 'body' was needed?

3

Hey there! FYI we’ve made a big update to our samples repo, including updating the webpack sample—check it out: GitHub - figma/plugin-samples: 🔌 Sample Figma plugins.

2 Likes