Figma Plugin with react

Ask the community
1

Greetigns,

I’m trying to build a Figma plugin using React and typscript, somehow I get a weird error saying

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

even though I tried to match my configuration files with some working plugins on github.

for reference, here is my configuration files:

my tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": ["es6", "DOM"],
    "strict": true,
    "jsx": "react",
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
    ],
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
  },
  "include": [
    "src",
    "code.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

and here is webpack.config.json:

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


module.exports = {
  entry: {
    ui: './src/index.tsx',
    code: './code.ts',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/ui.html',
      filename: 'ui.html',
      inlineSource: '.(js)$',
      chunks: ['ui'],
      cache: false,
    }),
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

the code generated into the dist directory and i see no error or warnings in my console except the “mode” property not being set.

i run the code using command "watch": "webpack --watch"

everything is being generated. the issue occurs when i try to open the plugin, that’s when i see the error message Uncaught TypeError: Cannot read properties of undefined (reading 'createElement') inside the Figma console.

I tried to change the following format of index.tsx many times but with no good

index.tsx:

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

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

i use react and react-dom version ^18.3.0

what could be the issue?