Vue + Vite + Parse JS: error “Super expression must either be null or a function”

Client SDKs JavaScript SDK
#1

Hello community,

first post here! I’m experiencing the exact same error from this post .

I have created a minimale repro on Codesandbox .

You will notice that the OP from the other post and I are both using Vite, which I believe is what is ultimately causing the issue.

The error happens here in LiveQuerySubscription.js:

var Subscription = /*#__PURE__*/function (_EventEmitter) {
  (0, _inherits2.default)(Subscription, _EventEmitter); // error happens here

  var _super = _createSuper(Subscription);

and it’s apparently because the following check fails in babel/runtime-corejs3/helpers/inherits.js:

function _inherits(subClass, superClass) {
// superClass is === undefined and the error is thrown
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = _Object$create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) setPrototypeOf(subClass, superClass);
}

…since superClass is undefined and the strict check !== null fails

image

All this is probably because Vite uses no preprocessor and instead leans on modern browsers being able to use ES6 modules? I don’t know, may be something completely different. All I know is that I don’t have this issue using the vue-cli in place of Vite… but then again, I was just migrating to Vite!! :cry:

Hope this can be solved, thanks in advance,

Stefano

2 Likes
Use minified Parse SDK with Typescript
#2

I got a similar error after cloning the project onto another computer. What worked was to delete package-lock.json and npm install again, and commit the new package-lock.json into my repo. Somehow it seems the Babel version was stuck and somehow it works on one computer but not another.

#3

Found a way to make it work by using the minified version of Parse (answer from TypeError when bundling latest Parse JS SDK using VITE (the vue bundler) · Issue #1362 · parse-community/Parse-SDK-JS · GitHub)

2 Likes
#5

I ran into the same issue :-/ Did you come up with a solution yet?

Changing to the minified SDK fixes the problem, but this way the Typescript type definitions from @types/parse don’t work anymore. (Re-installing the npm packages didn’t make a difference either.)

#6

Thanks for reaching out, Dr. Barto. I also encountered the same issue and am still looking for a solution. Changing to the minified SDK seems to work, but it does render the Typescript type definitions from @types/parse useless. Re-installing the npm packages did not seem to help either. Do let me know if you manage to find a solution.Thank you for reaching out, dr_barto. I appreciate your offer to help and would be happy to accept it.

#8

Can you try add this to your Vite config:

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
       parse: path.resolve(__dirname, './node_modules/parse/dist/parse.min.js')
    },
  },
  ...
})
Use minified Parse SDK with Typescript
#9

@dblythy thanks! This indeed solves the issue: by providing a parse alias I can use import Parse from 'parse' and get the type definitions from @types/parse applied :clap:

The only drawback with this solution I still see is that effectively I’m still using the minified library, which causes a larger bundle size in the production build than the non-minified version would. I certainly can live with that for the time being :sunglasses:

#10

I haven’t been able to find a better solution after hours of trying.

The Super expression issue comes from EventStream being undefined, which can be resolved with npm i events

This solves the issue for the dev vite server, but for the production build, another issue happens.

It seems that the JS SDK is compiled with babel/preset-env, babel-runtime, and browsify which creates {__esModule: true, default: ...} for each export. It seems that rollup on production then packages that up again, and decode2.default is not a function is thrown.

If anyone has any idea how to create a better solution than this solution, please let me know