[@sentry/remix] - ESM error when importing @sentry/remix

[SaraVieira]

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 package are you using?

@sentry/remix

SDK Version

7.4.1

Framework Version

1.5.1

Link to Sentry event

No response

Steps to Reproduce

Running the app will surface the error. You can see the instructions here: https://github.com/webstudio-is/webstudio/blob/main/docs/contributing.md#designer-installation

Expected Result

No error happens

Actual Result

As soon as the server starts I see this error on both the browser and terminal

/Users/saravieira/Projects/webstudio-designer/node_modules/@sentry/remix/esm/index.server.js:1
import { getCurrentHub, init as init$1, configureScope } from '@sentry/node';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/Users/saravieira/Projects/webstudio-designer/app/entry.server.tsx:5:25)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at /Users/saravieira/Projects/webstudio-designer/node_modules/@remix-run/serve/dist/index.js:43:17
    at Layer.handle [as handle_request] (/Users/saravieira/Projects/webstudio-designer/node_modules/express/lib/router/layer.js:95:5)

I am currently using v16.15.1 of node

Here is the code I used in a PR: https://github.com/webstudio-is/webstudio-designer/pull/103/files

[SaraVieira]

Updates:

I tried following the steps in this page: https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages

And I still get a CJS error:

/Users/saravieira/Projects/webstudio-designer/node_modules/@sentry/utils/esm/buildPolyfills/index.js:1
export { _asyncNullishCoalesce } from './_asyncNullishCoalesce.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/Users/saravieira/Projects/webstudio-designer/api/_build/index.js:2512:29)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at /Users/saravieira/Projects/webstudio-designer/node_modules/@remix-run/serve/dist/index.js:43:17
    at Layer.handle [as handle_request] (/Users/saravieira/Projects/webstudio-designer/node_modules/express/lib/router/layer.js:95:5)
    ```

[nfelger]

For anyone looking for a workaround, adding this to the exports in remix.config.js fixed it for me:

  serverDependenciesToBundle: [/@sentry\/.*/],

[SaraVieira]

@nfelger what a hero! That does work! Thank you!

[vladanpaunovic]

Hey @SaraVieira thanks for trying @sentry/remix and this beautiful write-up of the issue! And thanks to our hero @nfelger for fixing this!

In a few hours, we will test & review the PR so you will get a working release soon.

[SaraVieira]

I'll test the new release as soon as it's out 🙏

Thank you for the quick response

[vladanpaunovic]

The fix for this bug was released in version 7.5.0 of our SDK. Enjoy and once again - thanks for reporting this!

[SaraVieira]

Working great!  🚀