Cannot find name 'document' error when building plugin UI with Webpack

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

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.

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