Issue with Nuxt 3 and tw-element: "Cannot read properties of null (reading 'style')

[aguiagui5]

Hello,

I am using Nuxt 3 and tw-element in my project. The input element from tw-element renders fine the first time, but when I navigate to another component and then return to the original component containing the tw-element input, I encounter an error that says, "Cannot read properties of null (reading 'style')."

Any help or suggestions on how to resolve this issue would be greatly appreciated.

Thank you.

[juujisai]

Hi! Since version 1.0.0 we added a possibility to include options in the initTE method. Providing the checkOtherImports option should solve this issue.

initTE({ Input }, { allowReinits: true });

You can read about the method and available options here:
https://tailwind-elements.com/docs/standard/getting-started/quick-start/#formats

[aguiagui5]

Hey! Thanks for the suggestion. I've tried adding the checkOtherImports option as you mentioned, but I'm still facing the same issue. Below is a snippet of my code:

`<script lang="ts" setup>
import { Datepicker, Select, Validation, Input, initTE, Ripple } from 'tw-elements'
import { ref } from 'vue'
const { t } = useI18n()
const { data } = useApiAuth()
const route = useRoute()
const config = useRuntimeConfig()
const orders = ref([])

onMounted(() => {
initTE({ Datepicker, Select, Validation, Input, Ripple }, { allowReinits: true }) ...`

Do you see anything I might be missing? Or is there another solution you can think of? Appreciate your help!

[juujisai]

I'm sorry I meant the allowReinits option, but I see its still not solving your issue.

Other thing to try would be the dynamic import of the tw-elements components inside the onMounted hook:

onMounted(async () => {
  const { Input, initTE } = await import("tw-elements");
  initTE({ Input });
});

[aguiagui5]

That doesn't work either. If you have any other suggestions, please let me know. It's a shame I can't use tw-elements in my projects. Thank you so much anyway!

[juujisai]

Try combining both, seems to fix the issue for me

onMounted(async () => {
  const { Input, initTE } = await import("tw-elements");
  initTE({ Input }, { allowReinits: true });
});

[aguiagui5]

I've tried combining both solutions as you suggested, but it's still not working. I've attached the code below for your reference:

<template>
  <ClientOnly>
    <section class="p-5">
      <el-breadcrumb separator="/" class="mb-6">
        <el-breadcrumb-item class="text-xl" :to="{ path: '/admin/invoiceEl' }"
          >Invoices</el-breadcrumb-item
        >
        <el-breadcrumb-item class="text-xl">Create Invoice</el-breadcrumb-item>
      </el-breadcrumb>
      <div
        class="relative mb-6"
        data-te-input-wrapper-init
        data-te-validate="input"
        data-te-validation-ruleset="isRequired"
        data-te-invalid-feedback="Is invalid"
        data-te-valid-feedback="Is valid"
      >
        <input
          id="exampleFormControlLogin1"
          v-model="company_email"
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[2.15] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Email"
        />
        <label
          for="exampleFormControlLogin1"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[2.15] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[1.15rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[1.15rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
        >
          Email
        </label>
      </div>
    </section>
  </ClientOnly>
</template>


<script lang="ts" setup>
definePageMeta({ middleware: ['auth', 'authadmin'] })

onMounted(async () => {
  const { Input, initTE } = await import('tw-elements')
  initTE({ Input }, { allowReinits: true })
})

const company_email = ref('')
</script>

If the issue gets resolved at any point, please let me know. Thank you.

[juujisai]

The code you pasted doesn't throw the error for me when I add allowReinits: true option. I just commented out the el-breadcrumb and definePageMeta. When I change routes (the input was unmounted) and go back I can still see the notches and no errors in my case.

I'm using nuxt 3.6.5. Are you using the tw-elements version 1.0.0 ?

Maybe for you the solution would be to init the input via JS?

const myInput = new Input(
  document.getElementById("myInputWrapper")
);

[aguiagui5]

I have updated Nuxt to version 3.6.5 and am using the allowReinits option, and it's working perfectly for me as well.
Thank you very much for your help. I truly appreciate it!