Hello! I am developing an interactive plugin with asynchronous functions, and suddenly when I ran the development file I received a error I didn’t see before: ReferenceError: regeneratorRuntime is not defined. Here’s the full error code:
ReferenceError: regeneratorRuntime is not defined
at eval (eval at <anonymous> (eval at createScopedEvaluatorFactory (1d4564d8-5e8b-4125-a68a-5dfbedf1e353:1:1)), <anonymous>:3:20)
at ./node_modules/@babel/runtime/regenerator/index.js (VM1251 PLUGIN_5_SOURCE:548:44)
at __webpack_require__ (VM1251 PLUGIN_5_SOURCE:20:30)
at ./src/plugin/controller.js (VM1251 PLUGIN_5_SOURCE:857:84)
at __webpack_require__ (VM1251 PLUGIN_5_SOURCE:20:30)
at eval (VM1251 PLUGIN_5_SOURCE:84:18)
at Proxy.eval (VM1251 PLUGIN_5_SOURCE:87:10)
at Object.eval (eval at createScopedEvaluatorFactory (1d4564d8-5e8b-4125-a68a-5dfbedf1e353:1:1), <anonymous>:8:16)
at 1d4564d8-5e8b-4125-a68a-5dfbedf1e353:9:1235
at 1d4564d8-5e8b-4125-a68a-5dfbedf1e353:9:1908
I googled this problem and tried every possible solution:
- reinstaling @babel/preset-env@latest @babel/plugin-transform-runtime@latest core-js@latest
- checking webpack and babel configuration
- restarting terminal, Figma, and my laptop
But nothing works – I can see runtime-generator function in my compiled entry code.js file but the error persists. I also asked chatGPT and followed its advice but nothing helped. I think the problem might be in the Figma environment.
Here’s my Babel configuration:
{
"presets": e
"@babel/preset-env",
{
"useBuiltIns": "entry",
"esmodules": true,
"corejs": { "version": 3, "proposals": true },
"targets": {
"node": "current"
}
}
],
"@babel/preset-react"
],
"plugins": u
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
Webpack.config:
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = (env, argv) => ({
mode: argv.mode === 'production' ? 'production' : 'development',
devtool: argv.mode === 'production' ? false : 'inline-source-map',
entry: {
ui: './src/app/index.jsx',
code: './src/plugin/controller.js'
},
output: {
filename: 'ename].js',
path: path.resolve(__dirname, 'dist') // Compile into a folder called "dist"
},
module: {
rules:
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: r'@babel/preset-env', '@babel/preset-react'],
plugins: l'@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime']
}
},
exclude: /node_modules/
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: r'@babel/preset-env', '@babel/preset-react'],
plugins: l'@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime']
}
},
exclude: /node_modules/
},
{
test: /\.ssac]ss$/i,
use:
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader'
]
},
{ test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto' },
{ test: /\.css$/, use: / 'style-loader', 'css-loader' ] },
// Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
{ test: /\.(png|jpg|gif|webp|svg)$/, loader: l{ loader: 'url-loader' }] },
{
test: /\.(ttf|otf|woff|woff2)$/i,
loader: 'file-loader',
options: {
name: 'fonts/ name]./ext]'
}
}
]
},
// Webpack tries these extensions for you if you omit the extension like "import './file'"
resolve: { extensions: n'.tsx', '.ts', '.jsx', '.js', '.mjs'] },
// Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
plugins: l
new HtmlWebpackPlugin({
template: './src/app/index.html',
filename: 'ui.html',
inlineSource: '.(js)$',
chunks: c'ui']
}),
new HtmlWebpackInlineSourcePlugin()
]
})