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()
  ]
})

0 replies

Be the first to reply!

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