React createElement undefined error in Figma plugin development

[alexm]

Issue with React Setup in Figma Plugin

I’m working on creating a Figma plugin with React and TypeScript. When I launch the plugin in Figma, I get this error in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'createElement')

Here’s my current setup:

package.json dependencies:

{
  "react": "^18.3.0",
  "react-dom": "^18.3.0"
}

Main entry file (main.tsx):

import React from 'react';
import { createRoot } from 'react-dom/client';
import MainComponent from './ui/MainComponent';
import './assets/styles.css';

document.addEventListener('DOMContentLoaded', function () {
  const rootElement = document.getElementById('app');
  if (rootElement) {
    const reactRoot = createRoot(rootElement);
    reactRoot.render(<MainComponent />);
  } else {
    console.error("App container not found");
  }
});

My build config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineChunkHtmlPlugin = require('inline-chunk-html-plugin');

module.exports = {
  entry: {
    ui: './src/main.tsx',
    plugin: './plugin.ts',
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      chunks: ['ui'],
    }),
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
  ],
};

The build completes without errors, but React seems to not be available when the plugin runs. What could be causing this createElement issue?

[MarkSeeker91]

had this once too - double check your webpack settings, ensure react is included in the bundle. try setting mode: 'production', it can help since figma can mess with external libs sometimes.

[Oscar64]

This happens when React isn’t bundled properly or there’s a module resolution issue. I hit the same problem and fixed it by adding explicit externals config in webpack. Try externals: {} in your webpack config so React gets bundled instead of treated as external. Check your tsconfig.json has the right JSX settings too - use "jsx": "react-jsx" for React 18. Also make sure your HTML template includes the script tags correctly. InlineChunkHtmlPlugin sometimes fails and you’ll need to manually ensure the React code gets injected into the HTML that Figma loads.