[BUG] when using `"type": "module"` in root package.json and convert `svelte.config.js` to ESM, plasmo errors requiring this file

josefaidt commented 1 year ago

What happened?

when using "type": "module" in root package.json and convert svelte.config.js to ESM, plasmo errors requiring this file

pnpm create plasmo --with-svelte
add "type": "module" to project root's package.json
rewrite svelte.config.js to ESM (i.e. ... export default {}
run pnpm build
observe error

➜  pnpm build

> ban-maniacal-falcon@0.0.0 build /Users/josef/Documents/playground/plasmo-svelte/ban-maniacal-falcon
> plasmo build

🟣 Plasmo v0.60.2
🔴 The Browser Extension Framework
🔵 INFO   | Prepare to bundle the extension...
🔴 ERROR  | require() of ES Module /Users/josef/Documents/playground/plasmo-svelte/ban-maniacal-falcon/svelte.config.js from /Users/josef/Documents/playground/plasmo-svelte/ban-maniacal-falcon/plasmo/node\_modules/.pnpm/@parcel+utils@2.8.2/node\_modules/@parcel/utils/lib/index.js not supported.
Instead change the require of svelte.config.js in /Users/josef/Documents/playground/plasmo-svelte/ban-maniacal-falcon/plasmo/node\_modules/.pnpm/@parcel+utils@2.8.2/node\_modules/@parcel/utils/lib/index.js to a dynamic import() which is available in all CommonJS modules.

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems.

josefaidt commented 1 year ago

after looking at this one a bit further, it appears this issue resides with parcel https://github.com/parcel-bundler/parcel/blob/50f8cc2979f0efafce30305ffd3c08a88a26ccf3/packages/core/utils/src/config.js#L77

louisgv commented 1 year ago

So technically, we do not have to use Parcel's config loader thingy at all in our plugin. We can just parse it ourselves in the config resolver with some modern esm/mjs/ts config file parser even (that's used by vite).

josefaidt commented 1 year ago

@louisgv agreed, that makes sense. I opened a PR with parcel to (hopefully) resolve this issue, and will close this since it is related to a dependency

josefaidt commented 1 year ago

We can just parse it ourselves in the config resolver with some modern esm/mjs/ts config file parser even (that's used by vite).

I would be very interested in a Vite setup

louisgv commented 1 year ago

We can just parse it ourselves in the config resolver with some modern esm/mjs/ts config file parser even (that's used by vite).

I would be very interested in a Vite setup

IMO, Vite is for web bundling. There's the crxjs suite of esbuild plugin that enable extension but afaik, the perf between vite (esbuild based) vs parcel 2 (SWC based), is largely the same - they both bundle the code and skip the type checking process.

What parcel offers out of the box is much more powerful than vite for customizing the bundler - which is why I chose it for Plasmo. Its plugin system allows tapping into almost every aspect of the build, and it has a lot of pre-built plugins for different ui frameworks and file extensions. This allows Plasmo to focus on enhancing the DX further, and not having to worry too much about dealing with the bundler (i.e, Plasmo supports Tailwinds and almost any css-in-js out of the box, etc...)

Tho, Plasmo and vite should works well together in the same repo, the same as nextjs and vite. Plasmo goal is not to be the bundle, it's to enhance the DX with more powerful API such as messaging and declarative module creation.

PlasmoHQ / plasmo