vue.jsparse-platformvuejs3vuetify.jsparse-server

Can't manage to use Parse-server and vue.js


I have a lot of troubles setting up a project that will be using parse-server, within a Vuetify 3 project.

Steps

  1. I am installing parse npm install parse @types/parse.
  2. I create a parse.ts file for configuration and initialization.
    import Parse from 'parse';
    Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
    Parse.serverURL = 'YOUR_PARSE_SERVER_URL';
    export default Parse;
  1. Trying using it in a script
    <script lang="ts" setup>
    
    import Parse from '@/parse'; // Path to parse file
    const createTestObject = async () => {
      const TestObject = Parse.Object.extend('TestObject');
      const testObject = new TestObject();
      testObject.set('name', 'Test Name');
    
      try {
        const result = await testObject.save();
        console.log('Test object created:', result);
      } catch (error) {
        console.error('Error creating test object:', error);
      }
    };
    </script>
  1. Use the component

That should be it right ? But then I got an error TypeError: Super expression must either be null or a function.

When commenting the script block, that error disappear, so it should be cause by the import.

What exactly is wrong here ?

Thanks !


Solution

  • Well, it seems that using import Parse from 'parse/dist/parse.min.js'; instead fix this issue...

    Edit : It fixed it in dev mode, but fails to build afterwards... So still looking for a clean solution

    Edit 2023-12-04 : Finally found the solution, in this thread. Basically, the idea is to change the compiler option to add the minified file, like so :

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