Comments (24)
You can do it in a simple way without mod webpack:
import DatatableFactory from 'vuejs-datatable/dist/vuejs-datatable.esm.js';
Vue.use(DatatableFactory);
That's all you need))
from vuejs-datatable.
For me above solution not worked.
// This solution is working for me
Vue.use(require('vuejs-datatable'));
from vuejs-datatable.
"vue": "^2.5.7",
"vuejs-datatable": "^1.7.0",
from vuejs-datatable.
tl;dr
Add this to your webpack.config.js
:
module.exports = {
resolve: {
alias: {
'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js',
}
},
}
Long explanation
Pretty much like Vue itself for its full build (see vuejs doc), vuejs-datatable is shipped in 2 different builds (with the PR #47 & v1.7.0): an IIFE and an ESM build. The main difference between those builds is that the IIFE rely on globally exposed variables (Vue
in your case), while the other will use node resolution to inject the Vue module. In your case, you need to use the ESM build. But for now, the default file imported when doing a require
or import
is the IIFE. . . .
But it is still quite odd that adding window.Vue = Vue;
did not solved your problem... So you may have another problem. Try to edit your webpack.config.js
and keep me in touch.
@pstephan1187 maybe we should replace the index file in the package.json
's main
field to vuejs-datatable/dist/vuejs-datatable.esm.js
to avoid this configuration requirement.
from vuejs-datatable.
Am having the same error, kindly assist
from vuejs-datatable.
Yes! that worked. Thank you very much!! Below was my setting, leaving it here, just in case someone else needs it.
in vue.config.js
module.exports = {
chainWebpack: config => {
config.resolve.alias.set('vuejs-datatable', 'vuejs-datatable/dist/vuejs-datatable.esm.js');
},
from vuejs-datatable.
Hi! I couldn't reply earlier. I try it today and it works!
from vuejs-datatable.
Spent hours to find out the reason of the same error. With vue cli 3, webpack 4.26.0 and vuejs-datatable 1.7.0, I've also fixed the "browser" field to "dist/vuejs-datatable.esm.js".
from vuejs-datatable.
@GerkinDev I'll get that change made and pushed up. Thank you
from vuejs-datatable.
Still have this issue with my setup. We are using Vue CLI 3 (so, no webpack.config. it is vue.config.js hence cannot do the above suggested work around), Typescript - so cannot do the import DatatableFactory from ../vuejs.datatable.esm.js file either. Please advise. Thanks!
from vuejs-datatable.
Hi,
Can you tell me more about your build tools? Are you using webpack? If so, could you please post your webpack.config.js
file?
Cheers!
from vuejs-datatable.
I'ld be glad to help, but there's just not enough informations for me to understand the problem.
- Are you using webpack to bundle your code or are you using the
<script src=".../vuejs-datatable.js"/>
format? - If using webpack, please provide your
webpack.config.js
file - What is your version of Vue & vuejs-datatable?
from vuejs-datatable.
- Thanks
- Thanks
from vuejs-datatable.
@GerkinDev
My setup is:
vue ^2.5.17
webpack ^4.19.0
vuejs-datatable ^1.7.0
This is my webpack.config.js
:
const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const resolve = relativePath => path.resolve(__dirname, '..', relativePath);
module.exports = {
mode: 'development',
entry: {
vue: 'vue',
index: resolve('src/main.js'),
},
output: {
filename: 'bundle.min.js',
path: resolve('dist'),
},
module: {
rules: [
{
test: /.(ttf|woff2|woff|eot|jpg|jpeg|png|svg)$/,
use: ['file-loader'],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ['vue-style-loader', {
loader: 'css-loader',
}],
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
js: [
'babel-loader',
],
},
cacheBusting: true,
},
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('node_modules/webpack-dev-server/client'),
],
},
{
test: /\.scss$/,
use: [
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.css$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}]
}
],
},
devtool: 'eval',
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
extensions: ['*', '.vue', '.js', '.json'],
},
performance: {
hints: false,
},
};
from vuejs-datatable.
Hey there, any news on this? Is the problem solved?
from vuejs-datatable.
For me above solution not worked.
// This solution is working for me
Vue.use(require('vuejs-datatable'));
it's work for me, with laravel and laravel mix.
thanks.
from vuejs-datatable.
Hi, I am having similar issue.
I have Vue 3.1.3 installed with webpack.
In a new project, i tried using DataTable by installing using: npm install vuejs-datatable
Everything is working ok before adding DataTable, My Main.js is given below, please guide what to do?
import 'bootstrap/dist/css/bootstrap.min.css'
import BootstrapVue from 'bootstrap-vue'
import VueResource from 'vue-resource'
import Vue from 'vue'
import DatatableFactory from "vuejs-datatable"
import App from './App.vue'
import { store } from './store/store'
Vue.use(VueResource);
Vue.use(BootstrapVue);
Vue.use(require('vuejs-datatable'));
//Vue.http.headers.common['Access-Control-Allow-Origin'] = 'true';
Vue.config.productionTip = false;
window.Vue = Vue;
new Vue({
store,
render: h => h(App),
}).$mount('#app')
=====================================
I am getting:
[HMR] Waiting for update signal from WDS... log.js:24:4
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html vue.runtime.esm.js:8021
TypeError: window.Vue is undefined[Learn More]
from vuejs-datatable.
Hi @usmankah
Can you please post your stack trace with files?
Btw please format your comment properly using Markdown syntax, it is much simpler to read.
Thank you
from vuejs-datatable.
- Package-Lock.json contains:
"vuejs-datatable": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/vuejs-datatable/-/vuejs-datatable-1.7.0.tgz", "integrity": "sha512-gsK6gVJ11GP4X1/XyomKXpfsunQetL6Un9XNkJ0YQIrbAZAT5F4DnCKNf+kPrxZNOpLb5pW0NctVFbEEiD9hqQ==", "requires": { "object-path": "0.11.4", "vue": "2.5.17" } }
-
Package.json contains:
"dependencies": { "bootstrap": "^4.1.3", "bootstrap-vue": "^2.0.0-rc.11", "jquery": "^3.3.1", "npm": "^6.4.1", "object-path": "^0.11.4", "popper.js": "^1.14.5", "vue": "^2.5.17", "vue-resource": "^1.5.1", "vuejs-datatable": "^1.7.0", "vuejs-datepicker": "^1.5.4", "vuex": "^3.0.1" }
-
StackTrace:
TypeError: window.Vue is undefined[Learn More] app.js line 4091 > eval:1:17262 <anonymous> vuejs-datatable.js:1 <anonymous> vuejs-datatable.js:1 <anonymous> vuejs-datatable.js:1 ./node_modules/vuejs-datatable/dist/vuejs-datatable.js http://localhost:8080/app.js:4091:1 __webpack_require__ http://localhost:8080/app.js:725:12 fn http://localhost:8080/app.js:102:20 <anonymous> webpack-internal:///./src/main.js:13:73 ./src/main.js http://localhost:8080/app.js:4456:1 __webpack_require__ http://localhost:8080/app.js:725:12 fn http://localhost:8080/app.js:102:20 0 http://localhost:8080/app.js:4481:18 __webpack_require__ http://localhost:8080/app.js:725:12 <anonymous> http://localhost:8080/app.js:792:18 <anonymous> http://localhost:8080/app.js:1:11
from vuejs-datatable.
tl;dr
Add this to your
webpack.config.js
:module.exports = { resolve: { alias: { 'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js', } }, }Long explanation
Pretty much like Vue itself for its full build (see vuejs doc), vuejs-datatable is shipped in 2 different builds (with the PR #47 & v1.7.0): an IIFE and an ESM build. The main difference between those builds is that the IIFE rely on globally exposed variables (
Vue
in your case), while the other will use node resolution to inject the Vue module. In your case, you need to use the ESM build. But for now, the default file imported when doing arequire
orimport
is the IIFE. . . .But it is still quite odd that adding
window.Vue = Vue;
did not solved your problem... So you may have another problem. Try to edit yourwebpack.config.js
and keep me in touch.@pstephan1187 maybe we should replace the index file in the
package.json
'smain
field tovuejs-datatable/dist/vuejs-datatable.esm.js
to avoid this configuration requirement.
Above solution works for me
from vuejs-datatable.
You can do it in a simple way without mod webpack:
import DatatableFactory from 'vuejs-datatable/dist/vuejs-datatable.esm.js';
Vue.use(DatatableFactory);That's all you need))
Thank you !!
from vuejs-datatable.
@shivanaru As described in vuejs/vue-cli#2398, you can still alias modules in the vue.config.js
file, and the syntax is exactly as above. The goal of vue-cli is to be a configurable webpack preset, so you should be able to do what you want with the underlying webpack.
from vuejs-datatable.
@SerGioPicconti Thanks a lot!
from vuejs-datatable.
**
> How can i Solve this issue
**
Uncaught TypeError: Cannot read property 'use' of undefined
at eval (index.js?a18c:8)
at Module../src/router/index.js (app.js:1508)
at webpack_require (app.js:849)
at fn (app.js:151)
at eval (main.js:13)
at Module../src/main.js (app.js:1496)
at webpack_require (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:1521)
at webpack_require (app.js:849)
from vuejs-datatable.
Related Issues (20)
- 'Filterable' column option doesn't limit filterable fields HOT 3
- Sort Number/INT in An Undue Manner HOT 2
- Broken links in docs HOT 3
- ERROR in ./node_modules/vue-property-decorator/lib/vue-property-decorator.js HOT 1
- It rendered normal HTML elements. How to set style example bootstrap. HOT 1
- How to add default message to empty table HOT 2
- Row on click and tables info HOT 1
- Misleading information in docs HOT 1
- TypeError: callback is not a function HOT 1
- State Saving
- Pager type abbreviated and short together
- Search field outside. HOT 1
- Selection Checkbox on header row
- Sorting on header doesn't work (only icon) in latest version. HOT 1
- Vue 3 compatability HOT 2
- Documentation inter-linking is broken HOT 1
- Action Required: Fix Renovate Configuration
- Freeze Table
- Dependency Dashboard
- Initial Sort
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuejs-datatable.