Errors when bundling for ES5 browser

Question

Errors when bundling for ES5 browser

ghostd opened this issue 5 years ago · comments

Vincent Ricard commented 5 years ago

Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

@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

Veniamin Krol · Answer 1 · Wed Apr 03 2019 15:49:02 GMT+0800 (China Standard Time)

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.

Daniel Griesser · Answer 2 · Wed Apr 03 2019 16:25:05 GMT+0800 (China Standard Time)

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

Cromefire_ · Answer 3 · Wed Apr 03 2019 17:10:09 GMT+0800 (China Standard Time)

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_ · Answer 4 · Wed Apr 03 2019 17:13:53 GMT+0800 (China Standard Time)

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

Veniamin Krol · Answer 5 · Wed Apr 03 2019 17:23:57 GMT+0800 (China Standard Time)

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 🤔

Daniel Griesser · Answer 6 · Wed Apr 03 2019 18:32:29 GMT+0800 (China Standard Time)

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.

Veniamin Krol · Answer 7 · Wed Apr 03 2019 18:39:35 GMT+0800 (China Standard Time)

@HazAT

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

Somewhat related:

Cromefire_ · Answer 8 · Wed Apr 03 2019 19:08:23 GMT+0800 (China Standard Time)

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 · Answer 9 · Wed Apr 03 2019 20:18:15 GMT+0800 (China Standard Time)

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