Parse-sdk-js: TypeError when bundling latest Parse JS SDK using VITE (the vue bundler)

[tremendus]

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.
• [-] I can reproduce the issue with the latest versions of Parse Server and the Parse JS SDK.

Issue Description

When bundling Parse JS SDK client through VITE - vue's new bundler, based on snowpack - compilation fails due to an error caused in parse.

Steps to reproduce

• Check out repo: https://github.com/tremendus/vite-vue3-tailwind-starter-parse-issue
• Branch -> main
• run npm i
• open browser if it doesn't automatically http://localhost:3000
• open developer console - see error

NOTE: parse lib is imported in src/App.vue

Actual Outcome

 Uncaught TypeError: Super expression must either be null or a function
    _inherits Babel
    Subscription LiveQuerySubscription.js:149
    js LiveQuerySubscription.js:197
    __require chunk-BIJEITIM.js:6
    js LiveQueryClient.js:65
    __require chunk-BIJEITIM.js:6
    js ParseLiveQuery.js:25
    __require chunk-BIJEITIM.js:6
    js Parse.js:286
    __require chunk-BIJEITIM.js:6
    js index.js:1
    __require chunk-BIJEITIM.js:6
    <anonymous> parse:1

This is the code at 149:

var Subscription = /*#__PURE__*/function (_EventEmitter) { << 149
  (0, _inherits2.default)(Subscription, _EventEmitter);

  var _super = _createSuper(Subscription);
  // ....

Expected Outcome

I expected Parse to be bundled without error

Environment

"parse": "^3.2.0",

• see package.json in repos for other dependencies.

Server

• Parse Server version: - Not applicable

Database

• System (MongoDB or Postgres): Not applicable

Client

• Parse JS SDK version: "parse": "^3.2.0",
• localhost on node 15.11 M1 using "vite": "^2.3.0"

Logs

No logs - see error in console

[dplewis]

Can you try using the CDN? https://cdnjs.cloudflare.com/ajax/libs/parse/3.2.0/parse.min.js

[GormanFletcher]

The CDN build doesn't emit the error. But having the NPM build work would be preferable, since it plays nicer with Typescript, build pipelines, etc.

I got the types to work with the CDN script by adding parse to my tsconfig.json types array.

[SidRathi47]

We got the same problem while using this in React as well, same things with Snowpack as well.

[dplewis]

Can you try to import from the dist/minified build?
// ES6 Minimized
import Parse from 'parse/dist/parse.min.js';

[tremendus]

Yes, confirm that does get bundled properly and without errors.

[GormanFletcher]

Yep, that functions correctly, though I think I'll have to stick with the CDN approach for the moment - TypeScript doesn't know how to match that import up with the parse package types.

Edit: I got TypeScript to play nice with the minified import by adding this to my tsconfig.json compilerOptions:

"baseUrl": ".",
"paths": {"parse/dist/parse.min.js": ["node_modules/@types/parse/index.d.ts"]}

[FunMiles]

I hit the same issue with SvelteKit which is based on Vite. The minified version solved the issue for me as well.

[lamualfa]

@GormanFletcher Thank you very much for the solution.

Formatted version

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "parse/dist/parse.min": ["node_modules/@types/parse/index.d.ts"]
    }
  }
}