bugsnag-js icon indicating copy to clipboard operation
bugsnag-js copied to clipboard

TypeScript error with React plugin on v7.3.0

Open ClementParis016 opened this issue 5 years ago • 7 comments

Hello,

I would like to report the new following TypeScript error following update to @bugsnag/[email protected] and @bugsnag/[email protected]:

import React from 'react';
import Bugsnag from '@bugsnag/js';
import BugsnagPluginReact from '@bugsnag/plugin-react';

export const bugsnagClient = Bugsnag.createClient({
  // ... rest of config omitted for simplicity
  plugins: [new BugsnagPluginReact(React)],
  // 		^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Property 'load' is missing in type 'BugsnagPluginReact' but required in type 'Plugin'.ts(2741)
});

Seems to be a regression in the types definition introduced in the internal refactors made for the 7.3.0 release.

ClementParis016 avatar Aug 11 '20 08:08 ClementParis016

Hey @ClementParis016, thank you for this report. This has been fixed in v7.3.1 🎉

xljones avatar Aug 11 '20 09:08 xljones

I am able to reproduce it with version 7.5.3

"@bugsnag/js": "^7.5.3",
"@bugsnag/plugin-react": "^7.5.3",
"typescript": "^4.1.2"

Error:

Property 'load' is missing in type 'BugsnagPluginReact' but required in type 'Plugin'.  TS2741

kamthamc avatar Dec 08 '20 19:12 kamthamc

Hi @kamthamc

I've just tried to reproduce this issue on a clean create-react-app project with bugsnag 7.5.3 and typescript 4.1.2, and it's working fine for me.

Can you share a reproduction example?

mattdyoung avatar Dec 11 '20 15:12 mattdyoung

@mattdyoung I have created a repo https://github.com/kamthamc/demo-bugsnag-js

Note: I am using yarn berry

If you want to use with vscode please run yarn dlx @yarnpkg/pnpify --sdk vscode

you can simply run yarn start to see the error.

Property 'load' is missing in type 'BugsnagPluginReact' but required in type 'Plugin'.  TS2741

    10 | export const bugsnagClient = Bugsnag.createClient({
    11 |   // ... rest of config omitted for simplicity
  > 12 |   plugins: [new BugsnagPluginReact(React)],
       |             ^
    13 | });
    14 |
    15 | ReactDOM.render(

kamthamc avatar Dec 11 '20 19:12 kamthamc

Hi @kamthamc

Thanks for the repro case - reopening this and we'll investigate further why the fix isn't working in this case.

mattdyoung avatar Dec 14 '20 16:12 mattdyoung

Hey @kamthamc, I've been investigating this and it's a slightly different problem to the original issue. When using Yarn berry and Plug'n'Play, @bugsnag/react-native isn't getting a copy of @bugsnag/core which it needs to resolve the types

We moved away from explicit dependencies on @bugsnag/core in our plugins because it causes a different Typescript issue when core is updated separately to a plugin (see https://github.com/bugsnag/bugsnag-js/issues/997)

I'm still investigating what we can do to make bugsnag-js work out of the box with Yarn berry, but one of these workarounds should fix the error in the meantime:

  • add pnpMode: loose to .yarnrc.yml
  • or add an explicit dependency on @bugsnag/core (i.e. run yarn add @bugsnag/core)

imjoehaines avatar Jan 18 '21 14:01 imjoehaines

@imjoehaines thanks for your help 🙏🏻

To future developers who see this issue. If you're using @bugsnag/plugin-react with Yarn berry, yarn add @bugsnag/core worked for me. If it doesn't work even you added bugsnag/core, try clear .next folder and build again. (or yarn cache clean)

Dann1y avatar Jul 05 '23 05:07 Dann1y