Hello everyone,

I am upgrading a phoenix 1.5 app to 1.6 and I am running into some issues with the way npm packages are handled with esbuild.

I am trying to use the web3 js library to connect a wallet via metamask and the likes…it works perfectly with webpack/phoenix 1.5 but when I use esbuild and phoenix 1.6 I am facing the following issue:

index.js:20 Uncaught ReferenceError: require is not defined
    at node_modules/web3-core-requestmanager/lib/index.js (index.js:20)
    at __require (app.js:26)
    at node_modules/web3-core/lib/index.js (index.js:22)
    at __require (app.js:26)
    at node_modules/web3/lib/index.js (index.js:29)
    at __require (app.js:26)
    at app.js:159

JS & its non-sense not really my area of expertise, tried a few stuff, adding some npm packages etc…but in vain

here’s my config.exs section on esbuild:

config :esbuild,
  version: "0.14.10",
  default: [
    args:
      ~w(js/app.js --bundle --sourcemap --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

and my package.json

{
  "scripts": {
    "deploy": "NODE_ENV=production npx tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.3.11",
    "postcss-cli": "^9.0.2",
    "postcss-import": "^14.0.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@tailwindcss/aspect-ratio": "^0.3.0",
    "@tailwindcss/forms": "^0.3.4",
    "@tailwindcss/typography": "^0.4.1",
    "@walletconnect/web3-provider": "^1.7.0",
    "alpinejs": "^3.5.2",
    "eth-sig-util": "^3.0.1",
    "nprogress": "^0.2.0",
    "tailwindcss": "^2.2.19",
    "web3": "^1.6.1",
    "web3modal": "^1.9.5"
  }
}

I have seen the doc on using plugins for esbuild in the phoenix hexdocs pages but no idea on how to do that and if it will solve my issue.

Thanks in advance!