react-figma-webpack-config

0.0.7 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

error Error: Cannot find module 'html-webpack-inline-source-plugin' ↓

cause Missing peer dependency

fix

npm install html-webpack-inline-source-plugin --save-dev

error TypeError: configure is not a function ↓

cause Using ES import syntax with a CommonJS package

fix

Use require() instead of import: const configure = require('react-figma-webpack-config');

error Error: Entry module not found: Error: Can't resolve './src/ui.js' ↓

cause Entry points defined in configure() do not match actual files

fix

Ensure entry paths are correct and files exist, e.g., configure({ entry: { ui: './src/ui.tsx', code: './src/code.ts' } })

Warnings

gotcha Package requires manual installation of many peer dependencies listed in README. ↓

fix Install all required packages: npm i html-webpack-inline-source-plugin html-webpack-plugin svg-inline-loader ts-loader webpack webpack-merge -D

gotcha Entry must be an object with both 'ui' and 'code' keys, otherwise builds may fail or produce incorrect output. ↓

fix Set entry as { ui: './path/to/ui', code: './path/to/code' }

gotcha The default configuration may not include necessary Figma-specific settings like 'figma' global variable handling. ↓

fix Configure ProvidePlugin or define plugin to expose 'figma' global if needed.

Install

npm install react-figma-webpack-config

yarn add react-figma-webpack-config

pnpm add react-figma-webpack-config

Imports

configure

wrong

import configure from 'react-figma-webpack-config';

correct

const configure = require('react-figma-webpack-config');

Package uses CommonJS, not ESM. ES import will fail.

configure (with options)

wrong

configure({ entry: './src/ui.js' })

correct

configure({ entry: { ui: './src/ui.js', code: './src/code.js' } })

Entry must be an object with 'ui' and 'code' keys for Figma plugin.

default config
wrong
```
new configure()
```
correct
```
configure()
```
configure is a function, not a class.

Quickstart

Creates a webpack configuration for a Figma plugin with React UI and TypeScript code entry points.

// webpack.config.js
var configure = require('react-figma-webpack-config');

module.exports = configure({
  entry: {
    ui: './src/ui.tsx',
    code: './src/code.ts'
  },
  output: {
    path: __dirname + '/dist'
  }
});