Hi! I've implemented the SuperTokens login to a vu...
# support-questions-legacy
a
Hi! I've implemented the SuperTokens login to a vue3 project and it works beautifully, but am greeted with lint-like errors for every class across the app, and I've isolated it down to the
supertokens-auth-react
package that appears to be causing it. Any info or advice to clean these errors would be super helpful 😊 Additionally here is the inline error
Copy code
Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Object literal may only specify known properties, and 'class' does not exist in type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)
index.d.ts(3176, 13): The expected type comes from property 'div' which is declared here on type 'IntrinsicElements'
r
hey @Adis . @porcellus can help out with this when he is available
p
hi. are you using jsx/tsx in your project?
a
Not using either jsx/tsx. For example here is a file in the project
SupertokensAuthentication.vue
Copy code
<script lang="ts">
import React from 'react'
import { createRoot } from 'react-dom/client'
import { unmountComponentAtNode } from 'react-dom'
import SuperTokensReactComponent from '@/components/auth/Supertokens'

export default {
  mounted: () => {
    const container = document.getElementById('auth') as Element | DocumentFragment
    const root = createRoot(container)
    root.render(React.createElement(SuperTokensReactComponent as React.FC))
  },
  beforeUnmount: () => {
    unmountComponentAtNode(document.getElementById('auth') as Element | DocumentFragment)
  },
  methods: {
    testLandingPage: () => {
      const storedValue = window.sessionStorage.getItem('signInSignUp') || 'sign-in'
      if (storedValue === 'sign-in') {
        window.sessionStorage.setItem('signInSignUp', 'sign-up')
      } else window.sessionStorage.setItem('signInSignUp', 'sign-in')
      location.reload()
    },
  },
}
</script>

<template>
  <div id="auth" class="h-full flex justify-center items-center relative" />
  <div class="absolute top-0 left-1/2 -translate-x-1/2">
    <button class="border p-2 rounded bg-black bg-opacity-25" @click="testLandingPage()">
      Change sign in sign up state
    </button>
  </div>
</template>
p
I think for some reason
@types/react
was installed as a dependency for you. this is strange, because we only have a dev dependency on it.
anyway, please check out the solution to this question, I think it should help: https://stackoverflow.com/questions/70302671/type-class-string-is-not-assignable-to-type-detailedhtmlpropshtmlattri
12 Views