n1c0

Phoenix 1.6 & esbuild having issues with web3

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!

7 comments

/phoenix #esbuild #web3

2 2243 7

2023-03-06 15:12:08 UTC

Most Liked

barberj

Running into same issue. Did you get this resolved?

My project is fairly vanilla. New starting from phx 1.6.

package.json

{
  "dependencies": {
    "web3": "^1.7.3"
  }
}

config/config.exs

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

In my app.js just importing import "web3"

Post #1

n1c0

Hi there,

I have found a workaround maybe not the most elegant…I gathered the minified js libraries into the vendor folder and put that in my app.js

import Web3 from "../vendor/web3.min";
import WalletConnect from "../vendor/walletclient.min";
import WalletConnectQRCodeModal from "../vendor/qrcode-modal.min";

It works fine like that but f you find another solution, please let us know as with this one I need to manually update for new versions of the libraries…

Post #2

baldmountain

There is a better way to fix this. Update your esbuild config like this:

config :esbuild,
  version: "0.12.18",
  default: [
    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => "#{Path.expand("../deps", __DIR__)}:#{Path.join(__DIR__, "node_modules")}"}
  ]

Note that there are two entries for NODE_PATH. One for deps and one for node_modules. You can then add whatever Javascript and CSS to node_modules and then import it into app.js and app.css.

Post #7