Skip to main content
Question

ReferenceError: regeneratorRuntime is not defined

  • November 27, 2023
  • 0 replies
  • 1094 views

Vitaly_Gachkovsky

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:

  1. reinstaling @babel/preset-env@latest @babel/plugin-transform-runtime@latest core-js@latest
  2. checking webpack and babel configuration
  3. 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": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "esmodules": true,
        "corejs": { "version": 3, "proposals": true },
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@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: '[name].js',
    path: path.resolve(__dirname, 'dist') // Compile into a folder called "dist"
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/, 
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime']
          }
        },
        exclude: /node_modules/
      },

      {
        test: /\.js$/, 
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime']
          }
        },
        exclude: /node_modules/
      },

      {
        test: /\.s[ac]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: [{ 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: ['.tsx', '.ts', '.jsx', '.js', '.mjs'] },

  // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/app/index.html',
      filename: 'ui.html',
      inlineSource: '.(js)$',
      chunks: ['ui']
    }),
    new HtmlWebpackInlineSourcePlugin()
  ]
})

Reply


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