TypeError: Cannot read property 'extend' of undefined

[joweste]

Hi, I am trying to use this component,

I am getting the next error:. What am I doing wrong? [Vue warn]: Error in created hook: "TypeError: Cannot read property 'extend' of undefined"

found in

---> Vue warn]: Error in created hook: "TypeError: Cannot read property 'extend' of undefined"

found in

---> at src/components/VdtnetTable.vue

at src/components/TesteVDNetTableComponent.vue at src/components/HelloWorld.vue at src/App.vue ``` I just copied from example and I created this TesteVDNetTableComponent.vue: ``` ``` ``` ```

[noogen]

Do you have jQuery loaded? Make sure that it is loaded before everything else. datatables.net depends on jQuery.

[joweste]

Hi, Yes I am jQuery Loaded. Here is my Main.js

import Vue from "vue"; import App from "./App"; import router from "./router";

import "bootstrap/dist/css/bootstrap.min.css"; import $ from "jquery";

Vue.config.productionTip = false;

/ eslint-disable no-new / new Vue({ el: "#app", router, render: h => h(App) });

I attached below. my sample project. If you can help me I´d appreciate.

vdnetTableTest.zip

[joweste]

I changed my Main.js to next. Now, I get a different error: "vue.complie is not a function". I seraqch on google nad I found: import Vue from 'vue'imports the runtime-only build, which does not have the compiler.

But, you are using "compile function". Can you fix it?

import Vue from "vue";
import App from "./App";
import router from "./router";

import jQuery from "jquery";

import "bootstrap/dist/css/bootstrap.min.css";

window.Vue = Vue;
window.jQuery = jQuery;

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  render: h => h(App)
});

Vue warn]: Error in mounted hook: "TypeError: vue.compile is not a function"

found in

---> at src/components/VdtnetTable.vue

at src/components/TesteVDNetTableComponent.vue at src/components/HelloWorld.vue at src/App.vue

[noogen]

Since you're not loading jQuery globally (reference as script object on the page before everything else), you can load it into my component jquery property like so https://github.com/niiknow/vue-datatables-net/issues/21#issuecomment-572129857

I suggest that you load jQuery globally. Otherwise, instead of the import "datatables.net-bs4";, you will have to load datatables.net-bs4 like so (ref: https://www.npmjs.com/package/datatables.net-bs4):

var $ = require( 'jquery' );
// this is how you pass in jquery to datatables.net if you didn't load it globally
require( 'datatables.net-bs4' )( $ );

[joweste]

Please, How about the compile problem? It occurs at: const res = vue.compile(<div>${field.template || ""}</div>);

[noogen]

Same answer, my component also have a vue property. Either load it globally or pass it into my component like the jquery example.

[joweste]

But the default import of the Vue has no compile function. See at: https://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

[noogen]

Yes it does, ref - https://vuejs.org/v2/api/#Vue-compile It's part of Vue and is how I use it to support native templating (sort-of).

[joweste]

I put a console.log(vue) before the next line of VdtnetTable: console.log(vue); const res = vue.compile(

${field.template || ""}

);

This is the result. So vue is ok, but compile is not found. I am stuck here.

vue: ƒ Vue (options) { if ("development" !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the new keyword'); } this._init(options); }

[joweste]

I am using vue webpack template from https://github.com/vuejs-templates/webpack

[joweste]

I am trying to find how Install the full build of the Vue to test it now.

[noogen]

Either reference vue gobally or pass in vue as a component property like example of jQuery here https://github.com/niiknow/vue-datatables-net/issues/21#issuecomment-572129857 and pass your Vue to the vue property instead of jquery property.

[joweste]

Thank but I think the problem is the vue version I have.
I think I solve the jquery problem. The problem now is: Runtime + Compiler vs. Runtime-only of the Vue package I use https://github.com/vuejs-templates/webpack. And I started my project with webpack selecting Runtime Vue only when It asked me on init of the project. I dont´t know where is the config of webpack to change to full build version. So, I am starting a new project and I will select build version of the Vue

[joweste]

Thank you. It works as a charm.

[joweste]

Here is what I did: import Vue from "vue"; import App from "./App"; import router from "./router";

import jQuery from "jquery";

import "bootstrap/dist/css/bootstrap.min.css";

window.Vue = Vue; window.jQuery = jQuery;

Vue.config.productionTip = false;

/ eslint-disable no-new / new Vue({ el: "#app", router, components: { App }, template: "" });

[joweste]

I had to choice Vue build version with webpack template

[joweste]

Why the ordering and search is not working in https://niiknow.github.io/vue-datatables-net/ demo?

[noogen]

Because the server-side of that demo does not support sorting and search. Use this for actual server-side demo: https://laratt.niiknow.org/home/contacts

[noogen]

Stale issue.