Hi Figma,

I’m following the instructions to set up Webpack for a Figma plugin I’m working on as per these https://www.figma.com/plugin-docs/bundling-webpack/ instructions.

However, after setting everything up, I’m running into the following errors while building the plugin

ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts
3:0-8
[tsl] ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts(3,1)
      TS2584: Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts
4:18-26
[tsl] ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts(4,19)
      TS2584: Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts
4:54-70
[tsl] ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts(4,55)
      TS2304: Cannot find name 'HTMLInputElement'.
ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts
6:2-8
[tsl] ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts(6,3)
      TS2552: Cannot find name 'parent'. Did you mean 'parseInt'?
ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts
9:0-8
[tsl] ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts(9,1)
      TS2584: Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts
10:2-8
[tsl] ERROR in /Users/aashreys/Workspace/figma/figma-controller-prototyper/src/ui.ts(10,3)
      TS2552: Cannot find name 'parent'. Did you mean 'parseInt'?
6 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.52.1 compiled with 6 errors in 220 ms
After searching the internet it seems like the solution to the problem is to compile TS against the ES6 standard. But being very new to web dev, I’m not sure what this means or how I should go about doing it.
Can someone help? TIA 
              
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 [compared for emit] (name: ui)
asset code.js 36.6 KiB [compared for emit] (name: code)
asset ui.html 909 bytes [compared 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 [built] [code generated]
      ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
  modules by path ./src/ 17.7 KiB
    modules by path ./src/*.ts 14.4 KiB
      ./src/ui.ts 384 bytes [built] [code generated]
      ./src/code.ts 14 KiB [built] [code generated]
    modules by path ./src/*.css 3.32 KiB
      ./src/ui.css 1.11 KiB [built] [code generated]
      ./node_modules/css-loader/dist/cjs.js!./src/ui.css 2.22 KiB [built] [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 [as _promise]
    [figma-controller-prototyper]/[tapable]/lib/Hook.js:22:14
webpack 5.52.1 compiled with 1 error in 2179 ms
              
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.
              
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.
              
Turns out the reason for this is html-webpak-webpack turns on the caching by default.

image1686×128 11.6 KB
Learn more
To fix this, just add cache: false to the arguments of new HtmlWebpackPlugin().