{"id":20497,"library":"react-figma-webpack-config","title":"react-figma-webpack-config","description":"Webpack configuration preset for React Figma plugin development. Version 0.0.7 (last release, no recent updates). Provides a preconfigured webpack setup optimized for Figma plugin projects using React, TypeScript, and SVG. Requires manual installation of peer dependencies (html-webpack-plugin, html-webpack-inline-source-plugin, svg-inline-loader, ts-loader, webpack, webpack-merge). Exports a function that returns a webpack config object, with optional overrides for entry points and other settings. Lightweight alternative to custom webpack setup for Figma plugins, but limited documentation and low activity.","status":"maintenance","version":"0.0.7","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install react-figma-webpack-config","lang":"bash","label":"npm"},{"cmd":"yarn add react-figma-webpack-config","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-figma-webpack-config","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used to inline source maps and assets in HTML for Figma UI","package":"html-webpack-inline-source-plugin","optional":false},{"reason":"Generates HTML file for Figma UI","package":"html-webpack-plugin","optional":false},{"reason":"Inline SVG files as React components","package":"svg-inline-loader","optional":false},{"reason":"TypeScript compilation","package":"ts-loader","optional":false},{"reason":"Core bundler","package":"webpack","optional":false},{"reason":"Extend default config with custom options","package":"webpack-merge","optional":false}],"imports":[{"note":"Package uses CommonJS, not ESM. ES import will fail.","wrong":"import configure from 'react-figma-webpack-config';","symbol":"configure","correct":"const configure = require('react-figma-webpack-config');"},{"note":"Entry must be an object with 'ui' and 'code' keys for Figma plugin.","wrong":"configure({ entry: './src/ui.js' })","symbol":"configure (with options)","correct":"configure({ entry: { ui: './src/ui.js', code: './src/code.js' } })"},{"note":"configure is a function, not a class.","wrong":"new configure()","symbol":"default config","correct":"configure()"}],"quickstart":{"code":"// webpack.config.js\nvar configure = require('react-figma-webpack-config');\n\nmodule.exports = configure({\n  entry: {\n    ui: './src/ui.tsx',\n    code: './src/code.ts'\n  },\n  output: {\n    path: __dirname + '/dist'\n  }\n});","lang":"javascript","description":"Creates a webpack configuration for a Figma plugin with React UI and TypeScript code entry points."},"warnings":[{"fix":"Install all required packages: npm i html-webpack-inline-source-plugin html-webpack-plugin svg-inline-loader ts-loader webpack webpack-merge -D","message":"Package requires manual installation of many peer dependencies listed in README.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Set entry as { ui: './path/to/ui', code: './path/to/code' }","message":"Entry must be an object with both 'ui' and 'code' keys, otherwise builds may fail or produce incorrect output.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Configure ProvidePlugin or define plugin to expose 'figma' global if needed.","message":"The default configuration may not include necessary Figma-specific settings like 'figma' global variable handling.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install html-webpack-inline-source-plugin --save-dev","cause":"Missing peer dependency","error":"Error: Cannot find module 'html-webpack-inline-source-plugin'"},{"fix":"Use require() instead of import: const configure = require('react-figma-webpack-config');","cause":"Using ES import syntax with a CommonJS package","error":"TypeError: configure is not a function"},{"fix":"Ensure entry paths are correct and files exist, e.g., configure({ entry: { ui: './src/ui.tsx', code: './src/code.ts' } })","cause":"Entry points defined in configure() do not match actual files","error":"Error: Entry module not found: Error: Can't resolve './src/ui.js'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}