JS SDK Module throwing Uncaught TypeError: (0 , import_defineToJSON.default) is not a function

Bugs
1

When trying to import '@8base/auth' to a Vite+Vue 3 project, the following error is trigger by the import statement.

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

If the import statement is removed, the error goes away. The file auth.js code is below. How do we fix this in the SDK?

import { Auth, AUTH_STRATEGIES } from '@8base/auth';
import store from "../../store";

/**
 * There are multiple auth strategies that can be
 * used when using 8base. By default, specifying
 * 'web_8base_cognito' will configure the 8base auth client.
 */

export const auth = Auth.createClient(
  {
    strategy: AUTH_STRATEGIES.WEB_8BASE_COGNITO,
  },
  {
    domain: import.meta.env.VITE_APP_AUTH_DOMAIN,
    clientId: import.meta.env.VITE_APP_AUTH_CLIENT_ID,
    logoutRedirectUri: `${window.location.origin}/logout`,
    redirectUri: `${window.location.origin}/auth/callback`,
  }
);
2

From I can find, it has something to do with the graphql-prettier package required by @8base/utils. It has a nested dependency of GraphQL version 14.7.0 but the Vue apollo composable requires >=15. Looks like GraphQL 15 renamed the defineToJSON file (https://github.com/graphql/graphql-js/issues/2646).

When I manually deleted the nested graphql dependency (node_modules/graphql-prettier/node_modules/graphql) the error goes away but I’m not sure how to actually fix. Nested dependency conflicts aren’t my forte. From what I understand, a fork of graphql-prettier that uses an updated version of graphql may be in order.

I have tried the overrides setting in the project package.json file to no avail.

3

You got it!

Adding the following to the package.json file should work.

  "overrides": {
    "graphql-prettier": {
      "graphql": ">=15.0.0"
    }
  }

I now have a full working Vite + Vue3 + 8base POC app that works here: https://github.com/8base/vite-vue3-8base-poc.git

4

awesome! I think maybe the repo is set to private, I’m getting a 404 on that link.

5

Thank you. Now it’s public!

1 Like
6

Just to note: this requires the npm v8.. for the overides config to work

1 Like