There is a solution described in the error message you sent:

Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.

In the tsconfig.json file or in the TS compiler options passed to webpack, add "dom" to the array called "lib". https://www.typescriptlang.org/tsconfig/lib.html

Ah I didn’t know where to add it earlier, but that fixed the error I mentioned. I now get a new Webpack error that seems to be coming from HtmlWebpackInlineSourcePlugin

aashreys@Aashreys-Mac-mini figma-controller-prototyper % npx webpack --mode=development --watch

asset ui.js 49.4 KiB Bcompared for emit] (name: ui)

asset code.js 36.6 KiB Bcompared for emit] (name: code)

asset ui.html 909 bytes scompared for emit]

runtime modules 937 bytes 4 modules

cacheable modules 26.6 KiB

  modules by path ./node_modules/ 8.86 KiB

    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules

    modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB

      ./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.28 KiB Bbuilt] ]code generated]

      ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB Bbuilt] ]code generated]

  modules by path ./src/ 17.7 KiB

    modules by path ./src/*.ts 14.4 KiB

      ./src/ui.ts 384 bytes sbuilt] ]code generated]

      ./src/code.ts 14 KiB Bbuilt] ]code generated]

    modules by path ./src/*.css 3.32 KiB

      ./src/ui.css 1.11 KiB Bbuilt] ]code generated]

      ./node_modules/css-loader/dist/cjs.js!./src/ui.css 2.22 KiB Bbuilt] ]code generated]



ERROR in   TypeError: Cannot read property 'source' of undefined

  

  - index.js:53 HtmlWebpackInlineSourcePlugin.resolveSourceMaps

     figma-controller-prototyper]/]html-webpack-inline-source-plugin]/index.js:53:22

  

  - index.js:118 HtmlWebpackInlineSourcePlugin.processTag

     figma-controller-prototyper]/]html-webpack-inline-source-plugin]/index.js:118:30

  

  - index.js:42 

     figma-controller-prototyper]/]html-webpack-inline-source-plugin]/index.js:42:24

  

  - Array.forEach

  

  - index.js:41 HtmlWebpackInlineSourcePlugin.processTags

     figma-controller-prototyper]/]html-webpack-inline-source-plugin]/index.js:41:23

  

  - index.js:25 

     figma-controller-prototyper]/]html-webpack-inline-source-plugin]/index.js:25:27

  

  

  - new Promise

  

  

  - Hook.js:22 Hook.PROMISE_DELEGATE Eas _promise]

     figma-controller-prototyper]/]tapable]/lib/Hook.js:22:14

  





webpack 5.52.1 compiled with 1 error in 2179 ms

Not sure what this means, I don’t use webpack myself.

Gotcha, lemme see if I can get this to compile without Webpack. I don’t have too many files in my plugin yet.

Just to clarify, I don’t use Webpack but I do use Rollup, which is essentially the same thing with different configuration and extensions. Also thinking of switching to esbuild.

If you wanna compile to a single file with just the TypeScript compiler, it’s possible: https://www.typescriptlang.org/tsconfig/#outFile, but only if you are not using any libraries and only want to compile the files that you have created. I don’t think TS can compile all imported libraries too.

Gotcha. I do have a few files I want to bundle, so something simple and fast like esbuild will be perfect. I’m looking at it now. Thanks so much!

@Gleb can you share how you are using rollup to create a single UI HTML file with css and js inline? I tried using esbuild, but there seems to be no plugin that can achieve this. Now I’m left with Rollup as my only option.

Check out this project, I use a slightly modified config from here for Rollup: GitHub - thomas-lowry/figsvelte: A boilerplate for creating Figma plugins with Svelte

Regarding esbuild, I haven’t tried it yet but check out the following resources:

• Bundling Figma Plugin With Esbuild - DEV Community


• Create Figma Plugin

For the people that are following the official Figma instructions and still wants to use webpack, you have to add the following configurations in the webpack.config.js file:

  output: {

    filename: "[name].js",

    publicPath: "/",

    path: path.resolve(__dirname, "dist"), // Compile into a folder called "dist"

  },



  // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it

  plugins: [

    new HtmlWebpackPlugin({

      template: "./src/ui.html",

      filename: "ui.html",

      inlineSource: ".(js)$",

      chunks: ["ui"],

      inject: "body",

    }),

    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),

  ],

The publicPath: “/” is for fixing the error of ‘source’ as undefined. Additionally, I had to add the inject: “body” because the HtmlWebpackInlineSourcePlugin was injecting the scripts before the html was rendered. With this property, the scripts are injected in the end of the body tag.

This helped me a lot! I think Figma official documentation has to be updated.

But another problem arose, Webpack not hot loading when I save the file, I had to restart the start script every time!

Turns out the reason for this is html-webpak-webpack turns on the caching by default.

To fix this, just add cache: false to the arguments of new HtmlWebpackPlugin().

Note: publicPath: “/” now needs to be “/dist” based on the new tutuorial (at least that’s what finally made it work for me 🙂 )