Conflicts between typings exposed globally

[SoYoung210]

Description

When using figma plugin typing with typescript, an error occurs due to duplicate global type declaration.

node_modules/.pnpm/@figma+plugin-typings@1.41.1/node_modules/@figma/plugin-typings/index.d.ts:11:9 - error TS2451: Cannot redeclare block-scoped variable 'console'.

11   const console: Console
           ~~~~~~~

  node_modules/.pnpm/typescript@4.5.4/node_modules/typescript/lib/lib.dom.d.ts:16669:13
    16669 declare var console: Console;
                      ~~~~~~~
    'console' was also declared here.

node_modules/.pnpm/typescript@4.5.4/node_modules/typescript/lib/lib.dom.d.ts:16669:13 - error TS2451: Cannot redeclare block-scoped variable 'console'.

16669 declare var console: Console;
                  ~~~~~~~

  node_modules/.pnpm/@figma+plugin-typings@1.41.1/node_modules/@figma/plugin-typings/index.d.ts:11:9
    11   const console: Console
               ~~~~~~~
    'console' was also declared here.

Found 2 errors.

Reproduce

1. Clone https://github.com/SoYoung210/figma-react-template
2. remove comment out tsconfig.json, also figma.d.ts in root

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "DOM"],
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "noImplicitReturns": true,
    "jsx": "react-jsx",
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
    ],
    "strict": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "exclude": [
    "node_modules"
  ]
}

3. run pnpm build(or just pnpm build:type)

Q1. Why are these types declared global in figma plugin? It was added from https://github.com/figma/plugin-typings/pull/52, isn't it necessary to configure DOM lib to extend in tsconfig.json?

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "DOM"],
  }
}

must extends DOM cause of react(in my project)

Q2. If keep the current type declaration, how can I bypass the type error in the reproduction repo?

[glebsexy]

See #90

[SoYoung210]

I looked at the linked issues, and if I change it to "lib": ["es6"], type error occurs in the react render code.

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <div>hello</div>;
}
/*
Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
*/
ReactDOM.render(<App />, document.getElementById('figma-react-template'));

Anyway, this is a duplicate issue, so I'm closing this issue!

[glebsexy]

You can avoid this issue this way https://github.com/figma/plugin-typings/issues/90#issuecomment-969392520

[SoYoung210]

Thanks!

and it works. 😄

/// <reference types="@figma/plugin-typings/plugin-api" />

declare global {
  const figma: PluginAPI
  const __html__: string
  const __uiFiles__: {
    [key: string]: string
  }
}

export { }

tsconfig.json

{
  "typeRoots": [
    "src/customTypings",
    "node_modules/@types"
  ],
}