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

New Issue Checklist

I am not disclosing a vulnerability.
I am not just asking a question.
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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 5
Comments: 18 (6 by maintainers)

Commits related to this issue

Implement workarounds for parse erroring on start The workaround is to use the minimized parse distribution Issues described more fully here: https://github.com/parse-community/Parse-SDK-JS/issues/1... — committed to gnu-lorien/yorick by gnu-lorien a year ago

Most upvoted comments

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"]}

GormanFletcher on May 19, 2021

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

dplewis on May 19, 2021

I experienced the same issue today while migrating my Vue project to Vite. I created this minimal Codesandbox repro before finding this issue… hope it helps. I also created a post on ParsePlatform Community with more details on what happens when the error is thrown.

0biWanKenobi on Sep 19, 2021

This appears to have been fixed. I’m on Vite @ 5.0.8, parse @ 4.3.1.

Method 1:

// results in browser console warning, but no errors:
// parse.js?v=8db0138c:26206 Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-b
import Parse from 'parse';

Method 2:

// no warnings or errors (for intellisense support this needs modified tsconfig.json)
import Parse from 'parse/dist/parse.min.js'

westhom on Jan 24, 2024

Still an issue with the current version of the JS SDK.

FYI, if you are not using typescript with Vite, I got my VSCode intellisense autocomplete working by adding jsconfig.json to the project root:

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

westhom on Mar 31, 2023

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.

GormanFletcher on May 18, 2021