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!

2 Likes

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"

1 Like

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…

1 Like

weird. i even get the issue using the minified version

 > vendor/web3.min.js:1:643: error: Could not resolve "core-js/modules/es6.object.freeze" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
    1 │ ... e})(e)}require("core-js/modules/es6.object.freeze"),require("core...
      ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > vendor/web3.min.js:1:688: error: Could not resolve "core-js/modules/es6.string.code-point-at" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
    1 │ ...e"),require("core-js/modules/es6.string.code-point-at"),require("c...
      ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~```

It might be more helpful to reach out on the esbuild GitHub repository. I’m not the problem pertains to Phoenix specifically.

danka…

In the end I found the prebuilt from web3 and am vendoring that.

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

Also make sure to send your private keys to the maintainers, because this is a giant security hole. At least lock a particular version and use subresource integrity…

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.

1 Like