Cannot create new OpenloginAdapter() on remixjs app

Help - Plug n Play PnP Web SDKs
1

Please provide the following details too when asking for help in this category:

  • SDK Version:
    “web3auth/base”: “^5.2.0”,
    “web3auth/no-modal”: “^5.2.0”,
    “web3auth/openlogin-adapter”: “^5.2.0”,
    “solana/web3.js”: “^1.36.0”
  • Platform:
    “polkadot/api”: “^9.13.6”,
    “polkadot/extension-dapp”: “^0.44.8”,
    “polkadot/extension-inject”: “^0.44.8”,
    “polkadot/ui-keyring”: “^2.12.1”,
    “polkadot/util-crypto”: “^10.2.6”,
    “remix-run/node”: “^1.10.1”,
    “remix-run/react”: “^1.10.1”,
    “remix-run/vercel”: “^1.10.1”,
  • Browser Console Screenshots: Chorme

I have trouble when I’m using

const openloginAdapter = new OpenloginAdapter();
web3authInstance.configureAdapter(openloginAdapter);

on my remix app. It is always throw “Uncaught SyntaxError: Identifier ‘process’ has already been declared” or " Dynamic require of “process/” is not supported"
image

2

image

3

Hello @tung.le2,

It seems that the issue is related to polyfill. Unfortunately, we do not have a demo Remix app available. Would you kindly provide us with a sample project so that we can work together to resolve the problem?

Thank you in advance for your response.

4

Hi,
thank you for your response, here is remixJs demo. Please have a look.

5

Hi team,
any update? :frowning:

6

Hello @tung.le2,

I appreciate you sharing this repository. I will take a look and keep you informed of any updates.

@maharshi can you take a look at this example and update with the latest SDK?

2 Likes
8

We’re also seeing similar issues with Remix and the “cannot include process/” error. We’re trying to workround internally and will share back if we figure out a solve but +1 to an example repo from the web3auth team

9

We got this working with the following in remix.config. Note you might need to do new clone of your project to ensure all of the various caches are wiped.

const { withEsbuildOverride } = require('remix-esbuild-override');
const GlobalsPolyfills = require('@esbuild-plugins/node-globals-polyfill').default;
const NodeModulesPolyfillPlugin = require('@esbuild-plugins/node-modules-polyfill').default;

withEsbuildOverride((option, { isServer }) => {
	if (!isServer) {
		option.plugins = [
			NodeModulesPolyfillPlugin(),
			GlobalsPolyfills({
				buffer: true,
				process: true,
			}),
			...option.plugins,
		];
	}

	return option;
});
10

Hey @amitt

Thanks for sharing. Let me reclone and test it. If things look good, would be happy to include it in our example’s repo for others to use.