Can't import parse in svelte

founderblocks-sils commented 1 year ago

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 parse@4.0.0-alpha.12

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] commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

dplewis commented 6 months ago

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

parse-community / Parse-SDK-JS