Vue 2: Uncaught TypeError: $(...).formBuilder is not a function about formbuilder HOT 9 CLOSED

Fixed it. Now i can see the form editor.

The fix was pretty obvious this time around. I forgot to actually use the loader on form-render, that's on me.

extend(config) {
    config.module.rules.push({
      test: /form-(builder|render)\.min\.js$/,        
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins:['@babel/plugin-transform-modules-commonjs', '@babel/plugin-transform-runtime', '@vue/babel-plugin-transform-vue-jsx', '@babel/plugin-syntax-jsx', '@babel/plugin-proposal-private-property-in-object', '@babel/plugin-transform-classes']
          },
        }
      ]
    })

    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    })
  }

from formbuilder.

I don't use Vue, however looking at your code I would suspect you are reloading jQuery again with the import jQuery (after including it first globally with the script src tag. You need to import jquery-ui sortable and require formBuilder after importing jQuery

Please see previous issue #789

@kevinchappell provided a sandbox demo https://codesandbox.io/p/sandbox/n91zzl4vpp

Specifically https://codesandbox.io/p/sandbox/n91zzl4vpp?file=%2Fsrc%2Fcomponents%2FformBuilder.vue%3A24%2C10

window.$ = window.jQuery = require('jquery');
require('jquery-ui-sortable'); //or import 'jquery-ui/ui/widgets/sortable';
require('formBuilder');

More info on StackOverflow

https://stackoverflow.com/questions/51648926/vue2-jquery-jquery-ui

If you get it working please consider submitting a PR for a documentation page

from formbuilder.

Alright so i have been testing this, using the provided code in the sandbox, requiring jquery-ui-sortable, formBuilder, and form-render (not sure if this is needed). It does not give me the type error anymore, but i receive a different one now, it says:
ERROR in ./node_modules/formBuilder/dist/form-builder.min.js 2:144575
Module parse failed: Unexpected token (2:144575)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders...
for formBuilder, and something similar for the form-render.

Not sure if i have missed something with the loaders.

the code right now is:

<template>
  <v-container fluid>
    <div id="fb-editor"></div>
  </v-container> 
</template>
  
<script>
  import jQuery from 'jquery'
  window.$ = window.jQuery = require('jquery');
  require('jquery-ui-sortable')
  require('formBuilder')
  require('formBuilder/dist/form-render.min.js')
  export default {
    mounted() {
      jQuery(function($) {
    $(document.getElementById('fb-editor')).formBuilder();
  });
    }
  }
</script>

I have babel-loader 8.2.5 and babel-core 6.26.3 installed.

from formbuilder.

UPDATE:
I fixed the "you may need an appropiate loader" error by configuring the nuxt.config.js properly, inside build for form-builder.min.js (not for form-render):

      config.module.rules.push({
        test: /form-builder\.min\.js$|form-builder\.js$/,        
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env']
            }
          }
        ]
      })

However, i now have another error, one that says:

ERROR in ./node_modules/formBuilder/dist/form-builder.min.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /opt/lampp/htdocs/thani/dirisalud-front/node_modules/formBuilder/dist/form-builder.min.js: path.inShadow is not a function

So now i'm stuck at that one.

from formbuilder.

I would guess these are all babel-loader errors now, likely need to install some plugins

https://stackoverflow.com/questions/54298816/how-to-fix-path-inshadow-is-not-a-function-when-transpiling-code-using-grunt
WebReflection/babel-plugin-transform-builtin-classes#16

from formbuilder.

Installed a few plugins:
plugins:['babel-plugin-transform-es2015-modules-commonjs', '@babel/plugin-transform-runtime', 'babel-plugin-transform-vue-jsx', '@babel/plugin-syntax-jsx', '@babel/plugin-proposal-private-property-in-object', '@babel/plugin-transform-classes']

with this, the path.inShadow error is gone.

The "you may need an appropiate loader" error remains for form-render.

Maybe i'm missing a specific plugin?

from formbuilder.

im a bit confused why any babel-loader would be needed for formBuilder or formRender. is your custom babel config not excluding node_modules?

from formbuilder.

I don't think so, no. This is the extent of my loader configuration in the nuxt config file:

  build: {
    extend(config) {
      config.module.rules.push({
        test: /form-builder\.min\.js$|form-builder\.js$/,        
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins:['babel-plugin-transform-es2015-modules-commonjs', '@babel/plugin-transform-runtime', 'babel-plugin-transform-vue-jsx', '@babel/plugin-syntax-jsx', '@babel/plugin-proposal-private-property-in-object', '@babel/plugin-transform-classes']
            }
          }
        ]
      })

      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },

Not sure what to say, if i didnt have babel loader, it would just tell me i need a loader for those files (which it doesnt anymore for formBuilder, but it does for formRender).

from formbuilder.

Glad you got it sorted it out 👍

from formbuilder.