I am trying to make my library work by importing it as a script tag, hosted on Vercel.
My JS client is a single index.js file that export defaults a class and sets an event listener on DOMContentLoaded. It runs fine when importing it locally, but after deploying to Vercel with no build log errors and importing it by HTML script, I’m receiving an error when importing the deployment as an HTML script:
“Uncaught SyntaxError: Unexpected token ‘export'”, referring to a line of code in my module.js that was added at the very end of the file by Parcel in the build process:
export {$cf838c15c8b009ba$export$2e2bcd8739ae039 as default};
The script tag has the type set to “module”. My app is a library and so I’ve followed Parcel’s instructions to come up with this package.json that should make it work with both CommonJS and ES Modules:
{
"name": "example-js-client",
"version": "1.0.0",
"source": "src/index.js",
"type": "module",
"main": "dist/main.js",
"module": "dist/module.js",
"scripts": {
"watch": "parcel watch",
"build": "parcel build"
},
"devDependencies": {
"parcel": "^2.8.3"
}
}
I’m not running any frameworks and I’m using yarn instead of npm. I’ve also made sure that the Vercel Project settings are configured for Parcel, as well as my node version (16.x). I’d appreciate any help on this.
What I’ve tried:
- adding –public-url flag to build script
- adding –dist-dir dist flag to build script
- adding –target browser flag to build script
- specifying the “target” key in the package.json
- creating a vercel.json:
{
"headers": [
{
"source": "/module.js",
"headers": [
{
"key": "Content-Type",
"value": "application/javascript"
}
]
}
]
}
I expected any of these to possibly allow me to simply work with my imported library, but none of these worked.