Error importing the lib in a quasar app

[isbincApps]

hi bro, this error is happening is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules Instead rename index.umd.js to end in .cjs, change the requiring code to use import(), or remove "type": "module".

[mesqueeb]

@isbincApps thanks for the report. will fix soon

[mesqueeb]

@isbincApps should be fixed on latest version!

_{--
Blitzar was made with 💜 by Luca Ban.
You cannot sponsor every project, but next time you do, think of this one for its prolonged maintenance.}

[isbincApps]

thanks, also is happening this error Unexpected token '.'

[mesqueeb]

Can you give me a reproduction? It works fine for me. This can mean a couple of things. Your browser might not be compatible or your build tool doesn't provide required poly fills or it could even be something completely else.

[isbincApps]

<template>
  <q-page class="flex flex-center">
    <BlitzForm
      v-model="formData"
      :schema="schema"
      :columnCount="2"
      :internalLabels="true"
      gridGap="2rem"
    />
  </q-page>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { BlitzForm } from 'blitzar'
import 'blitzar/dist/style.css'

const schema = [
  {
    id: 'name',
    span: 1,
    component: 'QInput', // make sure it's registered in `quasar.conf.js`
    label: 'Superhero name',
    subLabel: 'Think of something cool.',
    required: true,
  },
  {
    id: 'powerOrigin',
    label: 'Power origin',
    subLabel: 'Where does your power come from?',
    component: 'QSelect', // make sure it's registered in `quasar.conf.js`
    options: [
      { value: '', label: 'Select one', disabled: true },
      { value: 'mutation', label: 'Mutation' },
      { value: 'self', label: 'Self taught' },
      { value: 'item', label: 'Magic item' },
      { value: 'gear', label: 'Gear' },
    ],
  },
  {
    id: 'stamina',
    span: 2,
    component: 'QSlider', // make sure it's registered in `quasar.conf.js`
    label: 'Stamina',
    subLabel: (value) => `value: ${value}`,
    dynamicProps: ['subLabel'],
    parseInput: (val) => Number(val),
    defaultValue: 50,
    min: 0,
    max: 100,
  },
  {
    id: 'power',
    span: 1,
    component: 'QInput', // make sure it's registered in `quasar.conf.js`
    label: 'Power',
    subLabel: 'Fill in a number. (this will get formatted as a number in the formData)',
    parseInput: (val) => Number(val),
    type: 'number',
  },
  {
    id: 'roleModel',
    span: 1,
    component: 'QSelect', // make sure it's registered in `quasar.conf.js`
    label: 'Role model',
    subLabel: 'Who do you look up to?',
    options: [
      { value: '', label: 'Select one', disabled: true },
      { value: 'captain-america', label: 'Steve Rogers/Captain America' },
      { value: 'iron-man', label: 'Tony Stark/Iron Man' },
      { value: 'thor-odinson', label: 'Thor Odinson' },
      { value: 'the-hulk', label: 'Bruce Banner/The Hulk' },
      { value: 'black-widow', label: 'Natasha Romanoff/Black Widow' },
      { value: 'hawkeye', label: 'Clint Barton/Hawkeye' },
      { value: 'quicksilver', label: 'Pietro Maximoff/Quicksilver' },
      { value: 'scarlet-witch', label: 'Wanda Maximoff/Scarlet Witch' },
    ],
  },
  {
    id: 'powerUps',
    span: 1,
    component: 'QOptionGroup', // make sure it's registered in `quasar.conf.js`
    type: 'checkbox',
    defaultValue: () => [],
    label: 'Choose some power-ups',
    columnCount: 3,
    options: [
      { value: 'iso-8', label: 'Magic crystal' },
      { value: 'hp-potion', label: 'Health potion' },
      { value: 'energy-potion', label: 'Energy drink' },
    ],
  },
  { span: 1 },
  {
    id: 'consent',
    component: 'QToggle', // make sure it's registered in `quasar.conf.js`
    span: 1,
    label: 'Do you agree with our terms?',
    rules: [(val) => val || 'You must accept our terms'],
    defaultValue: false,
  },
  {
    id: 'submissionDate',
    span: 1,
    component: 'QInput', // make sure it's registered in `quasar.conf.js`
    type: 'date',
    label: 'Date of submission',
  },
]

export default defineComponent({
  name: 'PageIndex',
  components: { BlitzForm },
  setup() {
    const formData = ref({})
    return { formData, schema }
  },
})
</script>

[isbincApps]

[isbincApps]

const isHtml5SelectField = component === 'select' && (isWhat.isArray(slot) || isWhat.isArray(slots?.default));
SyntaxError: Unexpected token '.'

thats the error

[mesqueeb]

@isbincApps ok so it's not expecting the . after the ? I guess. I think this can be solved by updating your tsconfig.json to include esnext inside of "lib"

Is your project a JS only Quasar project? In that case, I'm not sure if you have a tsconfig.json ? : O

[isbincApps]

yes, my project is only js and it doesn't have a tsconfig.json file

[mesqueeb]

@isbincApps sorry I haven't found the time yet to try and set up a JS only project and reproduce this issue.

if you could provide me with a zip with such a project (excluding node_modules folder), which I can just open, npm i and run to reproduce this issue, that'd make it a lot faster for me! ; )

[shershen08]

A similar issue happens to me, I am using Vue3 + Quazar installed as a lib, not via Quazar CLI - it seems to be the problem

./node_modules/@blitzar/utils/dist/index.es.js 34:93
Module parse failed: Unexpected token (34:93)
File was processed with these loaders:
 * ./node_modules/vue-cli-plugin-quasar/lib/loader.js.transform-quasar-imports.js
You may need an additional loader to handle the result of these loaders.
|         let newVal = val;
|         // special handling for HTML5 'select' fields:
>         const isHtml5SelectField = component === 'select' && (isArray(slot) || isArray(slots?.default));
|         const selectOptions = isHtml5SelectField ? slot || slots?.default : options;
|         if (isArray(selectOptions)) {

[shershen08]

Show me the problem was fixed after I manually (via https://babeljs.io/) transpired this file and importing CJS file not es-module file, like so import { BlitzForm } from '~blitzar/dist/index.cjs'