Can't import parse in svelte

[founderblocks-sils]

New Issue Checklist

• [x] I am not disclosing a vulnerability.
• [x] I am not just asking a question.
• [x] I have searched through existing issues.
• [x] I can reproduce the issue with the latest versions of Parse Server and the Parse JS SDK.

Issue Description

Steps to reproduce

$ npm create svelte@latest my-app
$ # -> svbeltekit demo app, using typescript
$ # -> no, no, no, no
$ cd my-app
$ npm i
$ npm i --save [email protected]

Now add this line e.g. to routes/Header.svelte:

import Parse from "parse/node";

And launch the site, check the JS console.

Actual Outcome

start.js:39 Uncaught (in promise) TypeError: Class extends value undefined is not a constructor or null
    at node_modules/parse/lib/node/LiveQuerySubscription.js (LiveQuerySubscription.js:100:42)
    at __require2 (chunk-7FP5O474.js?v=548792af:10:50)
    at node_modules/parse/lib/node/LiveQueryClient.js (LiveQueryClient.js:10:53)
    at __require2 (chunk-7FP5O474.js?v=548792af:10:50)
    at node_modules/parse/lib/node/ParseLiveQuery.js (ParseLiveQuery.js:8:47)
    at __require2 (chunk-7FP5O474.js?v=548792af:10:50)
    at node_modules/parse/lib/node/Parse.js (Parse.js:255:19)
    at __require2 (chunk-7FP5O474.js?v=548792af:10:50)
    at node_modules/parse/node.js (node.js:1:18)
    at __require2 (chunk-7FP5O474.js?v=548792af:10:50)
node_modules/parse/lib/node/LiveQuerySubscription.js	@	LiveQuerySubscription.js:100
__require2	@	chunk-7FP5O474.js?v=548792af:10
node_modules/parse/lib/node/LiveQueryClient.js	@	LiveQueryClient.js:10
__require2	@	chunk-7FP5O474.js?v=548792af:10
node_modules/parse/lib/node/ParseLiveQuery.js	@	ParseLiveQuery.js:8
__require2	@	chunk-7FP5O474.js?v=548792af:10
node_modules/parse/lib/node/Parse.js	@	Parse.js:255
__require2	@	chunk-7FP5O474.js?v=548792af:10
node_modules/parse/node.js	@	node.js:1
__require2	@	chunk-7FP5O474.js?v=548792af:10
(anonymous)	@	node.js:1
await in (anonymous) (async)		
(anonymous)	@	(index):201

Expected Outcome

Parse gets imported correctly.

Environment

Package.json:

{
	"name": "my-app",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
	},
	"devDependencies": {
		"@fontsource/fira-mono": "^4.5.10",
		"@neoconfetti/svelte": "^1.0.0",
		"@sveltejs/adapter-auto": "^2.0.0",
		"@sveltejs/kit": "^1.5.0",
		"@types/cookie": "^0.5.1",
		"svelte": "^3.54.0",
		"svelte-check": "^3.0.1",
		"tslib": "^2.4.1",
		"typescript": "^4.9.3",
		"vite": "^4.0.0"
	},
	"type": "module",
	"dependencies": {
		"parse": "^4.0.0-alpha.12"
	}
}

Server

• Parse Server version: no server involved, SDK version see above
• Operating system: linux
• Local or remote host (AWS, Azure, Google Cloud, Heroku, Digital Ocean, etc): local

Database

• System (MongoDB or Postgres): none
• Database version: none
• Local or remote host (MongoDB Atlas, mLab, AWS, Azure, Google Cloud, etc): none

Client

• Parse JS SDK version: 4.0.0-alpha.12

Logs

[parse-github-assistant[bot]]

Thanks for opening this issue!

• 🚀 You can help us to fix this issue faster by opening a pull request with a failing test. See our Contribution Guide for how to make a pull request, or read our New Contributor's Guide if this is your first time contributing.

[dplewis]

@vipersils Can you ensure the EventEmitter loaded? LiveQuerySubscription extends the EventEmitter

https://github.com/parse-community/Parse-SDK-JS/blob/51c269fa60d7ddfbf58b32f961371da638f21a27/src/EventEmitter.js#L12-L14

[founderblocks-sils]

Adding this to my code: import { EventEmitter } from "events";

yields:

Error: Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code.  See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

The documentation on the above link also explicitly states that libraries should not rely on that and this should be reported as a bug to them:

We recommend avoiding Node.js modules for browser code to reduce the bundle size, although you can add polyfills manually. If the module is imported from a third-party library (that's meant to be used in the browser), it's advised to report the issue to the respective library.

I'm guessing it can be worked around by doing some polyfill magic with the vite configs though based on this.

[founderblocks-sils]

I can confirm that using https://www.npmjs.com/package/vite-plugin-node-polyfills works as a workaround.

[dplewis]

Completed by https://github.com/parse-community/Parse-SDK-JS/pull/2109