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

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

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)
    ```

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

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

@nfelger

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

@SaraVieira

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.

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

Thank you for the quick response

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

Working great! 🚀

Navigation Menu

Repository navigation

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

Is there an existing issue for this?

How do you use Sentry?

Which package are you using?

SDK Version

Framework Version

Link to Sentry event

Steps to Reproduce

Expected Result

Actual Result

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

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

Description

Is there an existing issue for this?

How do you use Sentry?

Which package are you using?

SDK Version

Framework Version

Link to Sentry event

Steps to Reproduce

Expected Result

Actual Result

Activity

SaraVieira commented on Jul 1, 2022

nfelger commented on Jul 2, 2022

SaraVieira commented on Jul 2, 2022

vladanpaunovic commented on Jul 4, 2022

SaraVieira commented on Jul 4, 2022

vladanpaunovic commented on Jul 5, 2022

SaraVieira commented on Jul 5, 2022

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions