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

[tremendus]

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

[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.

[sidwebworks]

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

[0biWanKenobi]

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.

[mtrezza]

@dblythy you are a vue expert, what's your opinion on this? Looks like a nuisance that should be fixed, do you have any idea about the scope of this?

[dblythy]

I solved this in my projects using npm i events, however it results in the production build with vite failing.

The error was:

TypeError: (0 , _decode2.default) is not a function

This seems to possibly be an issue with Rollup and the bundled Parse JS SDK, but I’m not entirely sure. I’ll try to further isolate the issue.

I ended up using import Parse from 'parse/dist/parse.min.js';

[westhom]

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

[dblythy]

@tremendus can you try adding this to your Vite configuration:

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
      parse: path.resolve(__dirname, './node_modules/parse/dist/parse.min.js')
    },
  },
  ...
})

[radandevist]

I guess this is already solved since the last release (4.3.1).

[mtrezza]

So can this issue be closed?

[tiavina-mika]

Is it still not fixed 3 years later?

[westhom]

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'

[ustad-nordin]

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

Did the same in my SvelteKit project, solved types error 🤜🏼🤛🏼