Error with React createElement in Figma Plugin

Other Questions Figma
1

Hello everyone!

I’m in the process of developing a Figma plugin using React and TypeScript, but I’m facing a perplexing issue. Upon launching the plugin, I encounter the error: Uncaught TypeError: Cannot read properties of undefined (reading 'createElement'). Even after aligning my configurations with several functional plugins, I’m still stuck. Below, I’ve shared my configuration files for further context:

webpack.config.js:

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

module.exports = {
  entry: {
    main: './src/app.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: ['main'],
    }),
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/main/]),
  ],
};

tsconfig.json:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "lib": ["es2017", "DOM"],
    "strict": true,
    "jsx": "react-jsx",
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
    ],
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "outDir": "./build"
  },
  "include": ["src/**/*", "plugin.ts"]
}

app.tsx:

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

const container = document.getElementById('app');
if (container) {
  const root = createRoot(container);
  root.render(<MainComponent />);
}

I’m using React version 18.3.0. The build process completes successfully and populates the build directory with the required files. However, the error only arises when I attempt to run the plugin in Figma. What could be the source of this problem?

2

figma’s sandbox is likely blocking react. try switching your tsconfig to "jsx": "react" instead of "react-jsx" and import like import * as React from 'react'. also, make sure ur runtime setup is correct - figma plugins can be weird with modern jsx transforms.