Using SES Modules in browser environment

[vamshich13]

Hello,

Can the @endo/static-module-record package be used in a browser environment, or is it only intended for use in a Node.js environment?
I am getting this error when I use @endo/static-module-record in browser environment:

ReferenceError: process is not defined
    at eval (core.ts?9295:40:17)
    at ../common/temp/node_modules/.pnpm/@babel+types@7.19.0/node_modules/@babel/types/lib/definitions/core.js 

If it is only intended for use in Node.js, then how can I use SES modules in a browser environment?

Please reply to my query, [ @naugtur @kriskowal @michaelfig ]
Thanks

[naugtur]

Hello,

SES and most tools built on top of it are runtime agnostic. @endo/static-module-record should work in the browser.

What is core.ts and how is the error above related to @endo/static-module-record ?
It doesn't look like the error is coming from @endo/static-module-record.

[vamshich13]

Thanks for the response. @naugtur
Looks like the @endo/static-module-record is using this package @babel/types, which uses process in
@babel/types/lib/definitions/core.js which is designed for use in Node.js

[naugtur]

That's not what the stacktrace says. Can you share more context? Are you using a bundler? How do you use @endo/static-module-record? Is your work in a private repository somewhere? Or can you create a minimal reproduction repo?

[vamshich13]

Hello @naugtur
I have created minimal reproduction repo: sample_module
Please check

[michaelfig]

@vamshich13 I see that you must be bundling since the @babel/ NPM packages use CommonJS require. They also reference process, but for the dependencies of @endo/static-module-record, they only seem to use process.env[someEnvironmentVariable]. You can neutralize these references by doing:

globalThis.process = { env: {} };

somewhere in an imported module before you import @endo/static-module-record.

[vamshich13]

@michaelfig
Thanks for the response, I have tried this.
But I got another error:

Uncaught ReferenceError: Buffer is not defined
    at eval (jsesc.js:30:18)
    at ./node_modules/@agoric/babel-generator/node_modules/jsesc/jsesc.js (bundle.js:228:1)
    at __webpack_require__ (bundle.js:2329:42)
    at eval (types.js:27:14)
    at ./node_modules/@agoric/babel-generator/lib/generators/types.js (bundle.js:140:1)
    at __webpack_require__ (bundle.js:2329:42)
    at eval (index.js:72:14)
    at ./node_modules/@agoric/babel-generator/lib/generators/index.js (bundle.js:74:1)
    at __webpack_require__ (bundle.js:2329:42)
    at eval (printer.js:10:26)

[naugtur]

I was wrong, the only reason why it works for us in the browser is how we bundle it.

agoric/babel-generator specifies "jsesc": "^2.5.1". jsesc declares only versions prior to 2 are browser compatible.
Looks like we're bundling polyfills for some basics when we're using static-module-record.
Browserify used to polyfill these automatically. If you're using webpack, you probably need to set fallbacks
https://viglucci.io/articles/how-to-polyfill-buffer-with-webpack-5
This would address process too.

[naugtur]

This commit mathiasbynens/jsesc@3c0362b says we should update to latest jsesc in @agoric/babel-generator

[vamshich13]

Thanks So much for the help!
It worked with webpack fallback.

  resolve: {
    fallback: {
        process: require.resolve('process/browser'),
        buffer: require.resolve('buffer/'),
    },
  },
...
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.ProvidePlugin(
      {
        process: 'process/browser',
        Buffer: ['buffer', 'Buffer'],
      }
    ),
  ],

[vamshich13]

@naugtur
I have one more question.
#1576