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.
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
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.
@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.
)