Sentry-javascript: Errors when bundling for ES5 browser

[ghostd]

• [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

Version:

5.0.4

Description

Hi,

I'm not sure if my issue is a duplicate of #1984 and #1979.

I'm using webpack to bundle my application. After running webpack in 'production' mode, i get a bundle with some ES6 keywords ('const', 'class'... and hence i'm targetting ES5 browsers). It worked in 5.0.0; i think my issue is due to this commit.

According the webpack documentation and this webpack issue, webpack uses the "browser".

I guess (not tried) i can add some specific webpack/babel settings for sentry, but i'm not very confortable with this.

Any advice?

Regards

[vkrol]

We have the same problem. Upgrading from 4 to 5 is not so simple due to the addition the module field in @sentry/browser package.json. Do we need to configure webpack and/or Babel to transpile node_modules?
Minimal reproduction: https://github.com/vkrol/sentry-5-esm-webpack-breaking-change.

[HazAT]

Thanks for reporting, we will change this, our esm / module build will be es5 with es6/es2015 import/export statements to fix this.

[cromefire]

Do we need to configure webpack and/or Babel to transpile node_modules?

Yes you should configure node_modules/@sentry for transpilation, you shouldbe aable to configure it like this (I'm not sure if include is correct):

test: {
    exclude: /node_modules/,
    include: [/node_modules\/@sentry/]
}

If you already have babel configured this should be easy

[cromefire]

Thanks for reporting, we will change this, our esm / module build will be es5 with es6/es2015 import/export statements to fix this.

I think webpack prefers es2015 by default anyway, maybe it should be documented better

[vkrol]

Yes you should configure node_modules/@sentry for transpilation

I think that this approach is not scalable because we have to maintain the list of the packages that we need to transpile manually 🤔

[HazAT]

yeah, I agree with @vkrol it's not practical, so we will switch to ship with es5 for esm.

It just seems so odd to me to have es5 code while having es6/es2015 import/exports, weird JS bundler world.

[vkrol]

@HazAT

It just seems so odd to me to have es5 code while having es6/es2015 import/exports, weird JS bundler world.

Somewhat related:

• https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview
• https://github.com/whatwg/html/issues/4432
• https://github.com/jkrems/proposal-pkg-exports/issues/29

[cromefire]

I think that this approach is not scalable because we have to maintain the list of the packages that we need to transpile manually 🤔

I do the opposite, I blacklist packages which do not work, in general I would say 95% of packages work if you transpile them

[issaTan]

Do we need to configure webpack and/or Babel to transpile node_modules?

Yes you should configure node_modules/@sentry for transpilation, you shouldbe aable to configure it like this (I'm not sure if include is correct):

test: {
    exclude: /node_modules/,
    include: [/node_modules\/@sentry/]
}

If you already have babel configured this should be easy

I have the same problem, but when I transpile it I have another problem, it throw another error:
ReferenceError: Can't find variable: exports #1988