Recover from error

[iamtekeste]

Hi @yuanqing I just wanted to let you know that I am enjoying using this toolkit. The only feedback I have is it should be able to recover from errors while in watch mode instead of terminating. It gets really cumbersome to have to restart it again and again after each error makes the build fail.

[yuanqing]

Watch mode on my machine doesn’t terminate when an error occurs. Can you share your node version and if possible the steps to reproduce?

[iamtekeste]

My node version is v15.5.0.

It happens only in some cases, for example here is one case where having a mismatch in your JSX tags would terminate it.

> build-figma-plugin --typecheck --watch

info Building...
 > src/ui.tsx:72:6: error: Expected closing tag "Container" to match opening tag "Stack"
    72 │     </Container>
       ╵       ~~~~~~~~~
   src/ui.tsx:46:5: note: The opening tag "Stack" is here
    46 │     <Stack space="small">
       ╵      ~~~~~

error esbuild error
    Build failed with 1 error:
    src/ui.tsx:72:6: error: Expected closing tag "Container" to match opening tag "Stack"
npm ERR! code 1
npm ERR! path /Users/tekestek/projects/health-icons-figma-plugin
npm ERR! command failed
npm ERR! command sh -c build-figma-plugin --typecheck --watch

[yuanqing]

I think this problem may have been fixed in the latest alpha version 🤔

I’m currently preparing a 1.2.0 release that includes some changes to the build-figma-plugin CLI. (See the changelog.) if you like, you can try to bump your @create-figma-plugin/build version to 1.2.0-alpha.1 to see if it fixes the issue

[iamtekeste]

I just gave this a shot and I seem to be getting the same build failure.

info Changed src/ui.tsx
 > src/ui.tsx:72:6: error: Expected closing tag "Container" to match opening tag "Stack"
    72 │     </Container>
       ╵       ~~~~~~~~~
   src/ui.tsx:46:5: note: The opening tag "Stack" is here
    46 │     <Stack space="small">
       ╵      ~~~~~

file:///Users/tekestek/projects/health-icons-figma-plugin/node_modules/@create-figma-plugin/build/lib/utilities/build-bundles-async/build-bundles-async.js:89
        throw new Error(formatEsbuildErrorMessage(error.message));
              ^

Error: esbuild error
    Build failed with 1 error:
    src/ui.tsx:72:6: error: Expected closing tag "Container" to match opening tag "Stack"
    at buildUiBundleAsync (file:///Users/tekestek/projects/health-icons-figma-plugin/node_modules/@create-figma-plugin/build/lib/utilities/build-bundles-async/build-bundles-async.js:89:15)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async Promise.all (index 1)
    at async buildBundlesAsync (file:///Users/tekestek/projects/health-icons-figma-plugin/node_modules/@create-figma-plugin/build/lib/utilities/build-bundles-async/build-bundles-async.js:9:5)
    at async Promise.all (index 0)
    at async FSWatcher.<anonymous> (file:///Users/tekestek/projects/health-icons-figma-plugin/node_modules/@create-figma-plugin/build/lib/watch-async/watch-async.js:41:9)

Here is what my package.json looks like now

{
  "name": "health-icons-figma-plugin",
  "version": "1.0.0",
  "keywords": [
    "create-figma-plugin",
    "figma",
    "figma-plugin"
  ],
  "license": "MIT",
  "author": "Tekeste Kidanu",
  "dependencies": {
    "@create-figma-plugin/ui": "^1.2.0-alpha.0",
    "@create-figma-plugin/utilities": "^1.1.1",
    "preact": "^10.5.13"
  },
  "devDependencies": {
    "@create-figma-plugin/build": "^1.2.0-alpha.1",
    "@create-figma-plugin/tsconfig": "^1.1.1",
    "@figma/plugin-typings": "^1",
    "typescript": "^4"
  },
  "scripts": {
    "build": "build-figma-plugin --typecheck --minify",
    "watch": "build-figma-plugin --typecheck --watch"
  },
  "figma-plugin": {
    "id": "health-icons-figma-plugin",
    "name": "Health Icons Figma Plugin",
    "main": "src/main.ts",
    "ui": "src/ui.tsx"
  }
}

[iamtekeste]

Another type of error that made it fail, hopefully this is helpful.

info Changed src/use-data.ts
 > src/use-data.ts:38:40: error: Expected ";" but found ":"
    38 │   const groupedByCategory: {key: string}: string} = {};
       ╵                                         ^

file:///Users/tekestek/projects/health-icons-figma-plugin/node_modules/@create-figma-plugin/build/lib/utilities/build-bundles-async/build-bundles-async.js:89
        throw new Error(formatEsbuildErrorMessage(error.message));
              ^

Error: esbuild error
    Build failed with 1 error:
    src/use-data.ts:38:40: error: Expected ";" but found ":"
    at buildUiBundleAsync (file:///Users/tekestek/projects/health-icons-figma-plugin/node_modules/@create-figma-plugin/build/lib/utilities/build-bundles-async/build-bundles-async.js:89:15)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async Promise.all (index 1)
    at async buildBundlesAsync (file:///Users/tekestek/projects/health-icons-figma-plugin/node_modules/@create-figma-plugin/build/lib/utilities/build-bundles-async/build-bundles-async.js:9:5)
    at async Promise.all (index 0)
    at async FSWatcher.<anonymous> (file:///Users/tekestek/projects/health-icons-figma-plugin/node_modules/@create-figma-plugin/build/lib/watch-async/watch-async.js:41:9)

[yuanqing]

@iamtekeste Thanks for the logs! I think I managed to figure out what could be happening and shipped a fix to the next branch – see 93b64a9.

Can you try and see if the latest version on the next branch solves the issue? See the instructions for building the project locally and testing changes on an existing plugin.

[iamtekeste]

Great job @yuanqing you fixed it! Now it doesn't terminate it but rather shows the error and as soon as I fix the error it goes back to successful watch mode. Feel free to close this issue now.

[iamtekeste]

If you want a stretch goal for this what you can do is show the error on the plugin UI itself just like Next.js does. 😉

[yuanqing]

Cool

[yuanqing]

The fix for this is now available as part of 1.2.0