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

[josefaidt]

What happened?

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

1. pnpm create plasmo --with-svelte
2. add "type": "module" to project root's package.json
3. rewrite svelte.config.js to ESM (i.e. ... export default {}
4. run pnpm build
5. 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

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

[josefaidt]

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]

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]

@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]

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]

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.