ts: "process is not defined" browser error in Svelte

[plbstl]

Importing @project-serum/anchor in my Svelte app gives an Internal Server Error in the browser with message process is not defined.

The error comes from Line 6 of the file below. This is not the first time that same line of code has given me an issue. See https://github.com/project-serum/anchor/issues/1145 and https://github.com/project-serum/anchor/issues/1232 https://github.com/project-serum/anchor/blob/01ff03b09b30b974f2854dd0b0b9a958dd509622/ts/src/utils/common.ts#L5-L7

[munanadi]

I believe this is an issue arising from using vite. BROWSER= npm run dev also doesn't seem to get rid of this

[plbstl]

I think it's because the code makes it to the browser where process is not defined

[Reljod]

Do we have a fix for this?

[joebuild]

In Vite 2.9.x I did this in vite.config.js:

define: {
        'process.env.ANCHOR_BROWSER': true
    },

I'm new to Svelte/Vite, and when I upgraded to 3 that seemed to break for me, though this (unsightly) workaround also does the trick: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

[nypam]

@joebuild Thank you so much!

[georgeportillo]

Thank you, this worked. Does anyone have an explanation?

[Henry-E]

It looks like an environment variable that anchor depends on wasn't available in your workspace or something like that.

[JohnWRalph]

'process.env.ANCHOR_BROWSER': true

you just saved me several hours of work. i must have installed a library that used "process" and it completely bricked my app. no idea how to get rid of it. right as rain now. Thanks a ton!

[kodmanyagha]

In Vite 2.9.x I did this in vite.config.js:

define: {
        'process.env.ANCHOR_BROWSER': true
    },

I'm new to Svelte/Vite, and when I upgraded to 3 that seemed to break for me, though this (unsightly) workaround also does the trick: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

This is awesome solution. But I think anchor library must detect runtime environment automatically and prevent this kind of bugs. And unfortunately documents doesn't inform us this kind of time waste and annoying problems. We're copying codes from documents but tataaa, adventure starting. Then start to spend hours and days. I think solana ecosystem must handle this problem.