Phoenix 1.6 & esbuild having issues with web3

n1c0

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 2400 7

2023-03-06 15:12:08 UTC

Showing Posts 1 to 7

Show Best Posts
Show All (oldest first)
Show All (newest first)

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

barberj

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...
      ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~```

Post #3

mhanberg

Expert LSP Core Team

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

Post #4

barberj

danka…

github.com/evanw/esbuild

Web3 import failure

opened 03:51PM - 15 Apr 22 UTC

closed 04:12PM - 15 Apr 22 UTC

barberj

Unable to resolve modules at build time. ``` > node_modules/eth-lib/lib/byt…es.js:9:201: error: Could not resolve "crypto" (use "--platform=node" when building for node) 9 │ ... !== "undefined") rnd = require("c" + "rypto").randomBytes(bytes);... ╵ ~~~ > node_modules/web3-providers-http/lib/index.js:26:19: error: Could not resolve "http" (use "--platform=node" when building for node) 26 │ var http = require('http'); ╵ ~~~~~~ > node_modules/web3-providers-http/lib/index.js:27:20: error: Could not resolve "https" (use "--platform=node" when building for node) 27 │ var https = require('https'); ╵ ~~~~~~~ > node_modules/web3-providers-ws/lib/helpers.js:9:22: error: Could not resolve "url" (use "--platform=node" when building for node) 9 │ var url = require('url'); ╵ ~~~~~ > node_modules/xhr2-cookies/dist/xml-http-request.js:21:19: error: Could not resolve "http" (use "--platform=node" when building for node) 21 │ var http = require("http"); ╵ ~~~~~~ > node_modules/web3-eth-accounts/lib/index.js:26:84: error: Could not resolve "crypto" (use "--platform=node" when building for node) 26 │ ...=== 'undefined') ? require('crypto-browserify') : require('crypto'); ╵ ~~~~~~~~ > node_modules/xhr2-cookies/dist/xml-http-request.js:22:20: error: Could not resolve "https" (use "--platform=node" when building for node) 22 │ var https = require("https"); ╵ ~~~~~~~ > node_modules/xhr2-cookies/dist/xml-http-request.js:23:17: error: Could not resolve "os" (use "--platform=node" when building for node) 23 │ var os = require("os"); ╵ ~~~~ > node_modules/xhr2-cookies/dist/xml-http-request.js:24:18: error: Could not resolve "url" (use "--platform=node" when building for node) 24 │ var url = require("url"); ╵ ~~~~~ > node_modules/ethereumjs-util/dist.browser/object.js:7:39: error: Could not resolve "assert" (use "--platform=node" when building for node) 7 │ var assert_1 = __importDefault(require("assert")); ╵ ~~~~~~~~ ``` Running with Elixir/Phoenix 1.6.7 `package.json` ``` { "dependencies": { "web3": "^1.7.3" } } ``` esbuild config: ``` # 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__)} ] ``` Standard vanilla install. After phx install I `npm install web3` and imported in `app.js` and getting errors. Please advise. Thanks in advance!

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

Post #5

al2o3cr

<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…

Post #6

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

— All posts loaded —