eslint(import/namespace): error 'BrowserTracing' not found in imported namespace 'Sentry'

[brettdh]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/remix

SDK Version

7.84.0

Framework Version

Remix 2.1.0

Link to Sentry event

n/a

SDK Setup

  Sentry.init({
    dsn: window.SENTRY_DSN,
    environment: window.SENTRY_ENVIRONMENT,
    tunnel: "/api/internal/sentry_proxy",
    tracesSampleRate: 1,
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1,

    beforeSend(event) {
      if (event.exception) {
        errorHook(event)
      }
      return event
    },

    integrations: [
      new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.remixRouterInstrumentation(
          useEffect,
          useLocation,
          useMatches,
        ),
      }),
      new Sentry.Replay({
        maskAllText: false,
        maskAllInputs: false,
        blockAllMedia: false,
      }),
    ],
  })

Steps to Reproduce

1. Configure Remix SDK as described in the setup guide (mine above has some small additions)
2. Run eslint with recommended config

Expected Result

No eslint error

Actual Result

Some variation of #4569 and #6705:

  32:18  error  'BrowserTracing' not found in imported namespace 'Sentry'  import/namespace
  39:18  error  'Replay' not found in imported namespace 'Sentry'          import/namespace

[lforst]

Hi, how did you import Sentry?

[brettdh]

As directed in the setup guide:

import * as Sentry from "@sentry/remix";

[lforst]

Would you mind sharing a small reproduction repo where we can generate this bug? Thanks!

Our generated types look fine so I am surprised you're running into this.

[brettdh]

Here you go: https://github.com/brettdh/sentry-remix-eslint-repro

Steps I took:

1. Run npx create-remix@latest --template remix-run/grunge-stack . (brettdh/sentry-remix-eslint-repro@50a7dbb)
2. Tidy up a couple things and commit the results of the remix.init script (brettdh/sentry-remix-eslint-repro@dfacdee)
3. Run npx @sentry/wizard@latest -i remix and fix unrelated import/order errors (brettdh/sentry-remix-eslint-repro@9635d84)

TIL that Github Actions has inline code annotations for checks like eslint 😮 as the errors I mentioned in the initial post also appear in that last commit I linked.

[Lms24]

My suspicion is that eslint is trying to resolve the Sentry import and picking the wrong entry point of the @sentry/remix package. Namely, the server entry point instead of the client one:

sentry-javascript/packages/remix/package.json

Lines 15 to 18 in 970b522

	"main": "build/cjs/index.server.js",
	"module": "build/esm/index.server.js",
	"browser": "build/esm/index.client.js",
	"types": "build/types/index.types.d.ts",

We rely on these entry points so that the bundler picks up the correct client or server SDK.

Not sure how to solve this though other than ignoring the rule for the Sentry import (which I totally get is not ideal). We briefly talked about shimming server and client-only exports in the respective opposite bundles (#9594) but it'd come with a cost possible bundle size increases and having to maintain these shims.

[mmospanenko]

Got the same issue with replayIntegration using pnpm, "@sentry/react": "^7.102.0"

[lforst]

@mmospanenko can you try deleting your node modules, cleaning your pnpm chache, and reinstalling everything? Thanks.

[mmospanenko]

yes, I was playing with it, but let me do it again. I use pnpm monorepo and Sentry only in one package (It could this behavior... maybe we should install all deps explicitly, etc)

1. rm -rf node_modules packages/*/node_modules
2. rm -rf $(pnpm store path)
3. pnpm i from root

the same:

I import it as import * as Sentry from '@sentry/react';

and have only Sentry (other ton of packages ok) errors in ESLint after migration from Yarn to pnpm:

 24:10  error  'captureException' not found in imported namespace 'Sentry'  import/namespace
 20:12  error  'replayIntegration' not found in imported namespace 'Sentry'  import/namespace

ESLint rules are 'recommended' default mostly, import/namespace as is

[binajmen]

@lforst I'm facing the same issue. I don't mind give you access to my private repo if that is okay for you?

[lforst]

@binajmen For sure, although a minimal reproduction would be more ideal, just to isolate the actual issue.

[binajmen]

@lforst I've just added you to the project. Unfortunately, I won't be able to create a reproducible example until next week. In the meantime, feel free to clone the repository if you have some time to spare. Currently, the project is not too extensive, so you shouldn't encounter much interference. :)

[lforst]

@binajmen Thank you! A public reproduction would be awesome so that other people can pick this up too! I will try to take a look.

[lforst]

I think this is a bug in eslint-plugin-import that our SDK just happens to run into. Would you mind raising an issue there?

I don't feel the need to fix this in the SDK because Typescript itself and other eslint plugins are able to resolve the exports just fine 🤔

[binajmen]

I have opened an issue on the eslint-plugin-import repository. Please feel free to add to it, as I was unable to provide detailed information.

Would the best workaround be to temporarily ignore these ESLint errors?

[lforst]

@binajmen thank you! A maintainer has answered there and clarified. With that information, I can say that we simply have an incompatibility with eslint-plugin-import that we will not fix (at least in the near future).

The SDK has different exports depending on which context it is run (server or client) and we currently do not have plans to align them. The TS type definitions are isomorphic and complete and our source of truth. If you want you can rely on those.

Closing as wont-fix (for now).

[binajmen]

@lforst thank you, not sure how I'll fix the lint issue but at least we know ;)

[ljharb]

fwiw, that's a very confusing API, and strongly suggests it should be split into two packages if it's not going to be aligned.

[GOWxx]

Got the same issue with replayIntegration using pnpm, "@sentry/react": "^7.102.0"

same error.

@lforst
I created a repository, hoping this can help you. Thank you for your hard work and dedication!

Minimum Reproducible Repository:

https://github.com/GOWxx/remix-pnpm-sentry-eslint-namespace-error-repo

[lforst]

@GOWxx we will not fix this. Please see import-js/eslint-plugin-import#2969 (comment)

[GOWxx]

@GOWxx we will not fix this. Please see import-js/eslint-plugin-import#2969 (comment)

Thank you for your reply. I will look for information related to TS import resolver to try and solve the issue. Thank you!