TypeError: Cannot read property 'Symbol' of undefined

[Baraksi]

Hey, I seem to get an error every time I try to use an helper function (specifically loadUniqueFonts or getBoundingRect, didn't try others) and then run the plugin locally on Figma for Windows 10. When I remove all of the usages my plugin runs, adding a call to an helper function prevents the plugin from opening and yields this error on Figma console:

TypeError: Cannot read property 'Symbol' of undefined
    at Object../node_modules/lodash/_Symbol.js (VM1261 PLUGIN_9_SOURCE:18085)
    at __webpack_require__ (VM1261 PLUGIN_9_SOURCE:20)
    at Object../node_modules/lodash/_baseGetTag.js (VM1261 PLUGIN_9_SOURCE:18902)
    at __webpack_require__ (VM1261 PLUGIN_9_SOURCE:20)
    at Object../node_modules/lodash/isSymbol.js (VM1261 PLUGIN_9_SOURCE:23264)
    at __webpack_require__ (VM1261 PLUGIN_9_SOURCE:20)
    at Object../node_modules/lodash/_isKey.js (VM1261 PLUGIN_9_SOURCE:21458)
    at __webpack_require__ (VM1261 PLUGIN_9_SOURCE:20)
    at Object../node_modules/lodash/_castPath.js (VM1261 PLUGIN_9_SOURCE:19909)
    at __webpack_require__ (VM1261 PLUGIN_9_SOURCE:20)

I understand it may seem like a lodash error, but as I mentioned when I remove all of @figma-plugin/helpers usages, there's no error. BTW, running the same code with all the usages on Mac seems to work without having this error.

Worth adding, on version 0.14.3 the same behavior happens, with a different error that is more indicative towards the helpers package. I updated to the latest version before opening the issue to check if it was already fixed.

Let me know if I can provide more details about it. Thanks!

[Baraksi]

Adding that pressing the code location (VM1261 PLUGIN_9_SOURCE:18085) from the console directs me to this line

I researched into it and found this, checked lodash repo and it seems there was a change in the relevant code, so I locally patched package.json of the helpers module to use the latest lodash version, then 'npm install' - unfortunately, the error persists, though not 100% sure if the patch was taken into account.

[danilowoz]

I'm having the same issue here, @Baraksi could you please provide what exactly the workaround you did was?

[Baraksi]

@danilowoz Well, after patching the helpers module locally to use lodash latest version didn't work, I ended up copying the helper functions that I needed and uninstalling the helpers module

[alexandrtovmach]

Thanks for reporting Could you guys attach your package.json? It seems like a conflict thing, not something inside the package

[alexandrtovmach]

I'll check if bump lodash helps, and if yes will release fixed version soon

[alexandrtovmach]

v0.15.2 of helpers contain experimental fix for getBoindingRect (basically it shows more information in logs what goes wrong). If it works, please provide the list of helpers with similar issues, I'll try to handle it and make another release

[danilowoz]

Hey @alexandrtovmach, I'm still getting the same error on the latest version. Here's my package.json, hope it helps:

 "dependencies": {
    "clsx": "^1.1.1",
    "deep-object-diff": "^1.1.0",
    "deepmerge": "^4.2.2",
    "design-system": "0.0.1",
    "figma-messenger": "^1.0.5",
    "humanize-string": "^2.1.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "tailwindcss": "^2.0.3"
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.13.0",
    "@figma-plugin/helpers": "^0.15.2",
    "@figma/plugin-typings": "^1.19.2",
    "@svgr/webpack": "^5.5.0",
    "@testing-library/react-hooks": "^5.1.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.1",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.1.1",
    "file-loader": "^6.2.0",
    "html-webpack-inline-source-plugin": "0.0.10",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^26.6.3",
    "postcss": "^8.2.8",
    "postcss-loader": "^4.2.0",
    "style-loader": "^2.0.0",
    "ts-jest": "^26.5.4",
    "ts-loader": "^8.0.17",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "typescript": "^4.2.3",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }

[alexandrtovmach]

@danilowoz great, could you also attach a list of helpers do you use? (or better to say "trying to use" 😄 )

[danilowoz]

Sure, the following ones:

• figmaRGBToHex
• hexToFigmaRGB
• webRGBToFigmaRGB

[myWsq]

Hi @alexandrtovmach , same error when using extractLinearGradientParamsFromTransform.

[rpcabrinha]

Hey @alexandrtovmach, I'm trying to use getBoundingRect but the error in OP persists. Are you still actively looking for a fix for this issue?

[alexandrtovmach]

could you provide any logs or steps to reproduce please?

[brettlyne]

We're working on an internal plugin at Intuit and interestingly some people get this error (me) and some don't. Seems like it has something to do with the Figma environment, not the build environment, since the code my coworker built runs fine on her machine, but I still get the error.

Figured it out! Unchecking Use Developer VM fixed the issue, which explains why the published plugin always worked.

[brettlyne]

Just noticed @rpcabrinha got this answer from Vlad Korzo with a webpack fix over at figmaplugins.slack.com:

in development mode you need to add

config.plugins.push(
 new webpack.DefinePlugin({
  global: {}, // Fix missing symbol error when running in developer VM
 }),
);

[rpcabrinha]

@alexandrtovmach thanks for replying. In the end I opted for a different way to build my Figma plugin. However, just like @brettlyne mentioned, it seems to be a problem with the Figma environment.

[phoenixbox]

We're working on an internal plugin at Intuit and interestingly some people get this error (me) and some don't. Seems like it has something to do with the Figma environment, not the build environment, since the code my coworker built runs fine on her machine, but I still get the error.

Figured it out! Unchecking Use Developer VM fixed the issue, which explains why the published plugin always worked.

Also just ran into this and toggling the developer VM off worked for me

[linjinxing]

Just noticed @rpcabrinha got this answer from Vlad Korzo with a webpack fix over at figmaplugins.slack.com:

in development mode you need to add

config.plugins.push(
 new webpack.DefinePlugin({
  global: {}, // Fix missing symbol error when running in developer VM
 }),
);

not work

[cihad]

My solution was:

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      // ...
      output: {
        entryFileNames: '[name].js',
        intro: "const window = eval('this'); void window;"
      },
    },
  },
})

intro is important here. void window; is necessary because tree-shaking. I don't need to disable developer VM now.