Sentry-javascript: Typescript issue when using @sentry/node @sentry/browser at the same project

[ZeroCho]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

• [x] @sentry/browser@4.5.2
• [x] @sentry/node@4.5.3

Description

I'm developing a react + node app which uses both @sentry/node(for node, server-side-rendering usage) and @sentry/browser(for react). I use npm not yarn

While processing via webpack, following issue happens. I'm using awesome-typescript-loader

ERROR in [at-loader] ./node_modules/@sentry/node/node_modules/@sentry/hub/dist/hub.d.ts:5:9 
    TS2451: Cannot redeclare block-scoped variable 'active'.

ERROR in [at-loader] ./node_modules/@sentry/hub/dist/hub.d.ts:5:9 
    TS2451: Cannot redeclare block-scoped variable 'active'.

ERROR in [at-loader] ./node_modules/@sentry/hub/dist/hub.d.ts:10:9 
    TS2717: Subsequent property declarations must have the same type.  Property '__SENTRY__' must be of type 'Carrier', but here has type 'Carrier'.

package.json dependencies

"dependencies": {
    "@anothers/wecare-sequelize": "^0.1.30",
    "@google-cloud/storage": "^2.3.1",
    "@sentry/browser": "^4.5.2",
    "@sentry/node": "^4.5.3",
    "@types/connect-redis": "0.0.8",
    "@types/cookie-parser": "^1.4.1",
    "@types/dotenv": "^6.1.0",
    "@types/express": "^4.16.0",
    "@types/express-session": "^1.15.11",
    "@types/gaussian": "^1.1.1",
    "@types/google-cloud__storage": "^1.7.2",
    "@types/helmet": "0.0.42",
    "@types/history": "^4.7.2",
    "@types/hpp": "^0.2.1",
    "@types/jsonwebtoken": "^8.3.0",
    "@types/morgan": "^1.7.35",
    "@types/qs": "^6.5.1",
    "@types/rc-slider": "^8.6.0",
    "@types/react": "^16.7.20",
    "@types/react-dom": "^16.0.11",
    "@types/react-headroom": "^2.2.0",
    "@types/react-helmet": "^5.0.8",
    "@types/react-hot-loader": "^4.1.0",
    "@types/react-redux": "^7.0.0",
    "@types/react-router": "^4.4.3",
    "@types/react-router-config": "^1.1.0",
    "@types/react-router-dom": "^4.3.1",
    "@types/react-slick": "^0.23.2",
    "@types/react-sticky": "^6.0.2",
    "@types/sequelize": "^4.27.34",
    "@types/smoothscroll-polyfill": "^0.3.0",
    "@types/styled-components": "^4.1.6",
    "@types/webpack-env": "^1.13.6",
   ...
}

I don't have any issues with @sentry/node alone, or @sentry/browser alone but have an issue when using both at the same time.
I guess this is due to type definition conflict(like duplicate type definition for both packages)

[HazAT]

So I think the problem is that you try to bundle both together, we never built the packages that this works (and probably never will).
The only thing you could do is have two bundles, one with @sentry/node for node and one with @sentry/browser for the frontend code.

There is sadly no way around this I think :/

[cakecatz]

I saw a same error when using different version of packages. (@sentry/node 5.0.6, @sentry/browser 5.1.0)
I changed package to same version then it was fixed. (@sentry/node 5.1.0, @sentry/browser 5.1.0)

[Neilpoulin]

I had a similar issue where I have a module for my /api code and a module of /shared code. The /api module pulls in some files from /shared and both have a dependency access @sentry/node. When I tried to compile with typescript, I got the same error described above.

Thanks to @cakecatz's answer, I realized that I had a difference in versions between my /shared module and my /api module. Installing the same version in both places seemed to fix the issue.

[herman-rogers]

I'm getting the same error with CI builds but I only have @sentry/browser installed.

[herman-rogers]

nevermind - we have a very special use case; we're using bazel and injecting ngsummary.json into third party apps. We had to inject this into @sentry/ and exclude @sentry/hub.