Parse-SDK-JS

Parse-SDK-JS copied to clipboard

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

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

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.

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

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

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

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

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

@GormanFletcher Thank you very much for the solution.

Formatted version

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

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.

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

Really thanks for this solution, it's work in all my vue file but, in my Quasar project, I need to create a file in boot folder and in this file don't recognize the @type/parse. I know, I can change the extension to my file to .js and "solve the problem" but I want to stay in typescript.

@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?

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';

I don't know why, but the error its gone... Maybe some update from @type/parse actualy I use 3.0.1

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

@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')
    },
  },
  ...
})

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

So can this issue be closed?

Is it still not fixed 3 years later?

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'

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 🤜🏼🤛🏼