Closed franciscohanna92 closed 6 years ago
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!
Am having the same error, kindly assist
I'ld be glad to help, but there's just not enough information~s~ for me to understand the problem.
<script src=".../vuejs-datatable.js"/>
format?webpack.config.js
file"vue": "^2.5.7", "vuejs-datatable": "^1.7.0",
@Ashley-dee2
@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,
},
};
Add this to your webpack.config.js
:
module.exports = {
resolve: {
alias: {
'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js',
}
},
}
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.
Hey there, any news on this? Is the problem solved?
@franciscohanna92
Hi! I couldn't reply earlier. I try it today and it works!
@GerkinDev I'll get that change made and pushed up. Thank you
For me above solution not worked.
// This solution is working for me Vue.use(require('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".
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.
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]
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
"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
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
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))
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 !!
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!
@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.
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'); },
@SerGioPicconti Thanks a lot!
**
** 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)
I'm importing and using as per docs:
And i'm getting the following error:
I tried `window.Vue = Vue;' with no luck, thinking that it was related to #28
What could it be?