Field is not defined

[xavi7th]

I am attempting to use this in an existing project, but any field I import gives this error on my browser 500 DevalueError: Cannot stringify arbitrary non-POJOs and on my terminal I get the following error

  error: ReferenceError: Field is not defined
      at /Users/leinad/Work/htdocs/phk/phkhotdeals.com/node_modules/svelte-ux/dist/components/DateField.svelte:105:31
      at Object.$$render (/Users/leinad/Work/htdocs/phk/phkhotdeals.com/node_modules/svelte/src/runtime/internal/ssr.js:134:16)
      at /Users/leinad/Work/htdocs/phk/phkhotdeals.com/src/lib/Components/FormInputs/FloatingDateInput.svelte:7:61
      at Object.$$render (/Users/leinad/Work/htdocs/phk/phkhotdeals.com/node_modules/svelte/src/runtime/internal/ssr.js:134:16)
      at /Users/leinad/Work/htdocs/phk/phkhotdeals.com/src/routes/(admin)/admin/gift-card/create/+page.svelte:148:98
      at Object.$$render (/Users/leinad/Work/htdocs/phk/phkhotdeals.com/node_modules/svelte/src/runtime/internal/ssr.js:134:16)
      at Object.default (/Users/leinad/Work/htdocs/phk/phkhotdeals.com/.svelte-kit/generated/root.svelte:121:93)
      at /Users/leinad/Work/htdocs/phk/phkhotdeals.com/src/routes/(admin)/+layout.svelte:27:357
      at Object.$$render (/Users/leinad/Work/htdocs/phk/phkhotdeals.com/node_modules/svelte/src/runtime/internal

My tailwind config is

const colors = require('tailwindcss/colors');

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'selector',
  safelist: ['dark',],
    content: [
    './node_modules/preline/preline.js',
    './src/**/*.{html,js,svelte,ts}',
     './node_modules/svelte-ux/**/*.{svelte,js}'
  ],

  theme: {
    // => @media (min-width: Xpx) { ... }
    screens: {
      'xs': '480px',
      'sm': '768px',
      'md': '1024px',
      'lg': '1280px',
      'xl': '1536px',
    },
    container: {
      center: true,
    },
    extend: {
      transitionProperty: {
        'size': 'height, width, margin, padding, border-width',
        'spacing': 'margin, pading, gap',
      },
      colors: {
        'brand': {
          50: '#fefae8',
          100: '#fef2c3',
          200: '#fee78a',
          300: '#fdd847',
          DEFAULT: '#facc15',
          400: '#eabd08',
          500: '#caa204',
          600: '#a18207',
          700: '#856d0e',
          800: '#715e12',
          900: '#423606',
        },
      }
    }
  },
  ux: {
    themes: {
      light: {
        primary: colors['orange']['500'],
        'primary-content': 'white',
        secondary: colors['blue']['500'],
        'surface-100': 'white',
        'surface-200': colors['gray']['100'],
        'surface-300': colors['gray']['300'],
        'surface-content': colors['gray']['900'],
      },
      dark: {
        primary: colors['orange']['500'],
        'primary-content': 'white',
        secondary: colors['blue']['500'],
        'surface-100': colors['zinc']['800'],
        'surface-200': colors['zinc']['900'],
        'surface-300': colors['zinc']['950'],
        'surface-content': colors['zinc']['100'],
      },
    },
  },
    plugins: [
    require('svelte-ux/plugins/tailwind.cjs'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('preline/plugin'),
  ]
};

And this is how I am importing it

<script>import { DateField } from 'svelte-ux';</script>
<DateField />

In the DateField component for example, if I comment out the <Field> component, the page builds without any errors so I am guessing it is somewhat related to the field component.

I also notice this error in my browser console when I do the above cls is not defined.

[techniq]

Hey @xavi7th 👋, thanks for checking out Svelte UX.

I've not encountered this before or have a general idea why you might be experiencing this. Being an existing project creating a minimal repo might be difficult, but if you could create one I can investigate. Also feel free on hop on the Discord if you want to try to chat through it.

[techniq]

@xavi7th Going to close for now. If you are able to create a repo for me to investigate, I can take a look.