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!