[BUG]

[nyirongojr]

I am using vuejs for frontend and laravel backend and i am trying to incorporate vue-formio for dynamic form creation. But nothing seems to work as i am getting an error when i create a new component. Am i doing something wrong?. In the console i am getting something like "app.js:161137 Uncaught TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf () at ./node_modules/vue-formio/lib/components/Form.js.__extends (app.js:161137)"

FYI: i am using vue version 2.5.7

[lschwalf]

I am importing the FormBuilder component to use inside of another project and I'm getting the same error.

[barclayd]

I'm getting the same error with the Types at: node_modules/vue-formio/lib/components/Form.js:7:9 using:

• vue-formio: 3.0.2
• vue 2.6.6
• typescript: 3.4.3

[lucasctd]

I am trying to use this lib with no success. I have only followed the tutorial on the README file, but it does not work,

[jeriah-formio]

We have upgraded vue.js which should resolve these issues. Can you try retesting on the latest vue version?

[nyirongojr]

I have tried it and still it's not working. still getting same error, i tried even to use the latest version of vuejs.

Here is the error from the console

Here is the test code i used, i just copied from the README file explanations.

[barclayd]

I can confirm the same results as @nyirongojr. I got the same errors after having bumped both formiojs and vue-formio libraries to version 4.

• vue-formio: 4.0.0
• formiojs: 4.2.6
• vue 2.6.6
• typescript: 3.4.3

[Sefriol]

<template>
  <div class="form-builder-render">
    <form-builder :form="formschema" :options="{}" />
  </div>
</template>
<script>
import { FormBuilder } from 'vue-formio'
export default {
  name: 'App',
  components: { FormBuilder },
  props: {
    formschema: { type: Object, default: () => {} }
  }
}
</script>
<style lang="scss" scoped>
</style>

Check that you also have ~font-awesome/scss/font-awesome, ~bootswatch/dist/yeti/variables, ~bootstrap/scss/bootstrap, ~bootswatch/dist/yeti/bootswatch, ~formiojs/dist/formio.full.css somehow included in your css.

I have not tried this with fresh project, so there might be a package that could solve this issue.

[nyirongojr]

@Sefriol am still getting same error app.js:148844 Uncaught TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf () at ./node_modules/vue-formio/lib/components/Form.js.extends (app.js:148844) at app.js:148876 at Object../node_modules/vue-formio/lib/components/Form.js (app.js:149051) at __webpack_require (app.js:20) at Object../node_modules/vue-formio/lib/components/index.js (app.js:149207) at webpack_require__ (app.js:20) at Object../node_modules/vue-formio/lib/index.js (app.js:149233) at webpack_require__ (app.js:20) at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Club/Form.vue?vue&type=script&lang=js& (app.js:2720)

I don't know what i am missing to make this work

[Sefriol]

It might be a babel or webpack issue.. Check that you have atleast these in your devdependancies:

  "devDependencies": {
    "@babel/core": "7.0.0",
    "@babel/register": "7.0.0",
    "@vue/cli-plugin-babel": "3.5.3",
    "@vue/cli-plugin-eslint": "3.5.1",
    "@vue/cli-plugin-unit-jest": "^3.9.0",
    "@vue/cli-service": "3.5.3",
    "@vue/test-utils": "1.0.0-beta.29",

since it seems that you are using an old version of babel. (i.e. I think "@babel/core": "7.0.0" replaces old "babel-core").

[vijji]

I had same issue when importing my custom vue component for jest unit tests. My custom component is importing form builder components from vue-formio.

It turns out it is a Vue - typescript compatible issue. I was able to fix the issue by building the vue-formio module with esModuleInterop:true option in tsconfig.json. For more information please check out StackOverflow thread

[Sefriol]

https://github.com/formio/vue-app-starterkit

Did you use this as a base? It should have that attribute on. I'm personally running just a normal node stack so I cannot comment much on the ts implementation.

[vijji]

I am using vue-formio and it is missing that attribute. I tried adding esModuleInterop:true and build the project which fixed the following error when imported into other vue components.

Uncaught TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf ()

@randallknutson any help in getting this bug fixed would be greatly appreciated. I can provide the pull request for the changes needed. thank you in advance.

[nyirongojr]

After a very long search, i ended up adapting the use of typescript. I am now able to have the forms rendered as expected. This is in line with the formiojs implementation as it uses typescript.

I would highly recommend to use https://github.com/formio/vue-app-starterkit as a boiler plate for those who are still facing challenges.

I guess i can close this issue for now.

[cymen]

I'm running into this bug and I'm not using typescript at all. Can we reopen this or do we need to file a new one because I don't think is resolved. I'm going to try what @vijji did above to see if solves it for me but right now it's a bit of a blocker.

[cymen]

I can confirm @vijji change resolves the issue for me too. I opened a PR to this project for it:

https://github.com/formio/vue-formio/pull/33

[tnorthcutt]

@nyirongojr any particular reason you closed this? Seems like without #33 merged it still exists 😕

[lailapfit]

I am experiencing the same error as well. I was able to resolve the error by formatting Form.js line 144: From: var namespace = _this.options.namespace || 'formio';

To: var namespace = _this.hasOwnProperty('options') ? _this.options.namespace : 'formio';

[stefanoverdelli]

i had the same problem and @lailapfit fix resolved for me!

[lailapfit]

If anyone needs to add the changes into their build, checkout this fix by using patch-package!