markmead / alpinejs-axios Goto Github PK
View Code? Open in Web Editor NEWAlpine JS magic methods wrapper for Axios API methods ๐จ
License: MIT License
Alpine JS magic methods wrapper for Axios API methods ๐จ
License: MIT License
I use esbuild
to build alpinejs-axios
bundle for browser, which raises errors while target to browser
platform but success to node
platform. Any idea to fix it?
> # Success in node platform
> pnpm exec esbuild --platform=node --bundle ./build.js --outfile=dist/cdn.js
dist\cdn.js 384.5kb
โก Done in 52ms
> # Fail to target to browser
> pnpm exec esbuild --bundle ./build.js --outfile=dist/cdn.js
โ [ERROR] Could not resolve "stream"
node_modules/.pnpm/[email protected]/node_modules/alpinejs-axios/dist/api.esm.js:1:669:
1 โ ...lue:!0}),e);var ci=R((bt,ri)=>{var ti=require("stream").Stream,qs=require("util");ri.exports=H;funct...
โต ~~~~~~~~
The package "stream" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "--platform=node" to do that, which will remove this error.
โ [ERROR] Could not resolve "util"
node_modules/.pnpm/alpinejs-axios@1.0.7/node_modules/alpinejs-axios/dist/api.esm.js:1:697:
1 โ ...)=>{var ti=require("stream").Stream,qs=require("util");ri.exports=H;function H(){this.source=null,th...
โต ~~~~~~
The package "util" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "--platform=node" to do that, which will remove this error.
โ [ERROR] Could not resolve "path"
node_modules/.pnpm/alpinejs-axios@1.0.7/node_modules/alpinejs-axios/dist/api.esm.js:1:141884:
1 โ ...r bi=R(B=>{"use strict";var Ne=fi(),Bs=require("path").extname,vi=/^\s*([^;\s]*)(?:;|\s|$)/,Cs=/^tex...
โต ~~~~~~
The package "path" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "--platform=node" to do that, which will remove this error.
โ [ERROR] Could not resolve "http"
node_modules/.pnpm/alpinejs-axios@1.0.7/node_modules/alpinejs-axios/dist/api.esm.js:1:145309:
1 โ ...=require("util"),la=require("path"),co=require("http"),po=require("https"),lo=require("url").parse,u...
โต ~~~~~~
The package "http" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "--platform=node" to do that, which will remove this error.
โ [ERROR] Could not resolve "https"
node_modules/.pnpm/alpinejs-axios@1.0.7/node_modules/alpinejs-axios/dist/api.esm.js:1:145328:
1 โ ...=require("path"),co=require("http"),po=require("https"),lo=require("url").parse,uo=require("fs"),mo=...
โต ~~~~~~~
The package "https" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "--platform=node" to do that, which will remove this error.
โ [ERROR] Could not resolve "url"
node_modules/.pnpm/alpinejs-axios@1.0.7/node_modules/alpinejs-axios/dist/api.esm.js:1:145348:
1 โ ...=require("http"),po=require("https"),lo=require("url").parse,uo=require("fs"),mo=require("stream").S...
โต ~~~~~
The package "url" wasn't found on the file system but is built into node. Are you trying to bundle
for node? You can use "--platform=node" to do that, which will remove this error.
6 of 10 errors shown (disable the message limit with --log-limit=0)
node:child_process:929
throw err;
^
Error: Command failed: D:\.home\Documents\repos\demo02\node_modules\.pnpm\@esbuild+win32-x64@0.20.2\node_modules\@esbuild\win32-x64\esbuild.exe --bundle ./build.js --outfile=dist/cdn.js
at checkExecSyncError (node:child_process:890:11)
at Object.execFileSync (node:child_process:926:15)
at Object.<anonymous> (D:\.home\Documents\repos\demo02\node_modules\.pnpm\esbuild@0.20.2\node_modules\esbuild\bin\esbuild:221:28)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:86:12)
at node:internal/main/run_main_module:23:47 {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 23972,
stdout: null,
stderr: null
}
Node.js v18.18.1
# Deps
mkdir demo
cd demo
pnpm init
pnpm add -D esbuild alpinejs alpinejs-axios
# Bundle entry point script
echo "import Alpine from 'alpinejs'
import api from 'alpinejs-axios'
Alpine.plugin(api)
Alpine.start()" > build.js
# Build bundle
pnpm exec esbuild --platform=browser --bundle ./build.js --outfile=dist/cdn.js
package.json
{
"name": "demo",
"devDependencies": {
"alpinejs": "^3.13.8",
"alpinejs-axios": "^1.0.7",
"esbuild": "^0.20.2"
}
}
Hi @markmead
I saw your example, looked tidy, and how about request header info, like api key or jwt key, how to bind together?
Thanks
Eric Xin
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.