sentry-javascript icon indicating copy to clipboard operation
sentry-javascript copied to clipboard

Build fails when using nodePolyfills from rollup-plugin-polyfill-node

Open hobbitronics opened this issue 10 months ago • 9 comments

Is there an existing issue for this?

  • [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
  • [X] I have reviewed the documentation https://docs.sentry.io/
  • [X] 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/svelte

SDK Version

7.111.0

Framework Version

Svelte 4

Link to Sentry event

No response

SDK Setup

import * as Sentry from '@sentry/svelte'

const environment = process.env.CF_PAGES_BRANCH
const dsn = process.env.SENTRY_DSN
const release = process.env.npm_package_version

console.debug(`Sentry.init ${dsn} ${environment} ${release}`)
Sentry.init({
  dsn,
  integrations: [Sentry.browserTracingIntegration()],
  environment,
  release,

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
})

Steps to Reproduce

go to https://codesandbox.io/p/devbox/flamboyant-water-mhnswk?file=%2Fsrc%2FApp.svelte%3A4%2C1

Expected Result

build succeeds

Actual Result

I get the following error unless I comment out nodePolyfills(), in my rollup.config.js file.

[!] Error: 'encode' is not exported by node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.umd.js, imported by node_modules/@sentry/svelte/node_modules/magic-string/dist/magic-string.es.mjs https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module node_modules/@sentry/svelte/node_modules/magic-string/dist/magic-string.es.mjs (1:9) 1: import { encode } from '@jridgewell/sourcemap-codec'; ^ 2: 3: class BitSet { Error: 'encode' is not exported by node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.umd.js, imported by node_modules/@sentry/svelte/node_modules/magic-string/dist/magic-string.es.mjs at error (/workspace/node_modules/rollup/dist/shared/rollup.js:198:30) at Module.error (/workspace/node_modules/rollup/dist/shared/rollup.js:12560:16) at Module.traceVariable (/workspace/node_modules/rollup/dist/shared/rollup.js:12919:29) at ModuleScope.findVariable (/workspace/node_modules/rollup/dist/shared/rollup.js:11571:39) at ChildScope.findVariable (/workspace/node_modules/rollup/dist/shared/rollup.js:6503:38) at ClassBodyScope.findVariable (/workspace/node_modules/rollup/dist/shared/rollup.js:6503:38) at ChildScope.findVariable (/workspace/node_modules/rollup/dist/shared/rollup.js:6503:38) at FunctionScope.findVariable (/workspace/node_modules/rollup/dist/shared/rollup.js:6503:38) at ChildScope.findVariable (/workspace/node_modules/rollup/dist/shared/rollup.js:6503:38) at Identifier.bind (/workspace/node_modules/rollup/dist/shared/rollup.js:7570:40)

hobbitronics avatar Apr 24 '24 01:04 hobbitronics

Just to clarify, you are using nodePolyfills in you svelte browser app? What's the reason/background on this?

I would guess that the node polyfill is overwriting something on the text encoder or similar, breaking things that are not built to work with node stuff 🤔

You could try doing something like this:

import { TextEncoder, TextDecoder } from 'node:utils'; // <-- not sure if that works with the polyfill..
window.TextEncoder = TectEncoder;
window.TextDecoder = TextDecoder;

mydea avatar Apr 24 '24 09:04 mydea

Just to clarify, you are using nodePolyfills in you svelte browser app? What's the reason/background on this?

I would guess that the node polyfill is overwriting something on the text encoder or similar, breaking things that are not built to work with node stuff 🤔

You could try doing something like this:

import { TextEncoder, TextDecoder } from 'node:utils'; // <-- not sure if that works with the polyfill..
window.TextEncoder = TectEncoder;
window.TextDecoder = TextDecoder;

Yes I am. I tried removing it, but got an error Uncaught ReferenceError: require$$0 is not defined I thought it was from the line in my app import qs from 'qs' since qs but don't see that anymore. It might be that the import is resolved as arequire`.

hobbitronics avatar Apr 24 '24 10:04 hobbitronics

So without having any further context I would suspect that you should probably not use nodePolyfill but instead transpile your code with a common JS plugin or something like this - there shouldn't normally be a reason to use a node polyfill in a browser environment 😅 We expect TextEncoder/TextDecoder to be available on the window, so if you're doing something that is interfering with that you'll need to find a way to set them back there!

mydea avatar Apr 24 '24 14:04 mydea

I am still struggling to get this to work and not sure what I am supposed to do with your suggestion above. I have tried adding globals: { util: 'util', }, to the output, but now get (!) Missing shims for Node.js built-ins [0] Creating a browser bundle that depends on "util". You might need to include https://github.com/FredKSchott/rollup-plugin-polyfill-node [0] LiveReload enabled. I have yet to try further, but will revisit this later today.

hobbitronics avatar Apr 29 '24 01:04 hobbitronics

So this is tricky to debug from the distance, but overall I believe rollup-plugin-polyfill-node is not supposed to run in the browser 🤔 So whatever needs this should probably also not run in the browser.

mydea avatar Apr 29 '24 09:04 mydea

Interestingly this error does not happen in another app using "@sentry/svelte": "^7.47.0", with rollup-plugin-polyfill-node. I tried rolling back to this version, but could not while using svelte 4.

hobbitronics avatar Apr 29 '24 23:04 hobbitronics

At this point, I think we'd need a repro to be able to dig further into this. Without this, I fear there isn't a lot we can do to figure out what's going on there!

mydea avatar Apr 30 '24 07:04 mydea

At this point, I think we'd need a repro to be able to dig further into this. Without this, I fear there isn't a lot we can do to figure out what's going on there!

I made one here https://codesandbox.io/p/devbox/flamboyant-water-mhnswk?file=%2Fsrc%2FApp.svelte%3A4%2C1

hobbitronics avatar Apr 30 '24 10:04 hobbitronics

So this is tricky to debug from the distance, but overall I believe rollup-plugin-polyfill-node is not supposed to run in the browser 🤔 So whatever needs this should probably also not run in the browser.

I think you are correct about this, but that means I have to dig through dependencies and replace with something else :(

hobbitronics avatar Apr 30 '24 10:04 hobbitronics

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!


"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

getsantry[bot] avatar Jul 02 '24 07:07 getsantry[bot]