Skip to main content
Question

Figma Plugin with react

  • August 5, 2024
  • 0 replies
  • 344 views

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?

This topic has been closed for replies.

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings