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?