Jump to content

Error referencing VueCSV.CsvDownload method in vuejs app


mstdmstdd

Recommended Posts

Hello,

in my laravel 5.8 / vuejs 2.5 app I need to upload csv file and
I found this https://github.com/ynishi/vuecsv plugin and tried to install it.
But installing it I got errors in JS console:

$ npm install ynishi/vuecsv

> core-js@2.6.9 postinstall /mnt/_work_sdb8/wwwroot/lar/wiznext/msg-laravel-application/node_modules/core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> bootstrap-vue@1.5.1 postinstall /mnt/_work_sdb8/wwwroot/lar/wiznext/msg-laravel-application/node_modules/bootstrap-vue
> opencollective postinstall || exit 0


                                                                                          Thanks for installing bootstrap-vue 
                                                                                     Please consider donating to our open collective
                                                                                            to help us maintain this package.

                                                                                               Number of contributors: 227
                                                                                                  Number of backers: 31
                                                                                                   Annual budget: $774                                                                                                 
                                                                                                 Current balance: $1,190                                                                                               
                                                                                                                                                                                                                       
                                                                             Donate: https://opencollective.com/bootstrap-vue/donate                                                                                   
                                                                                                                                                                                                                       
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})                                                      
                                                                                                                                                                                                                       
+ vuecsv@0.0.10                                                                                                                                                                                                        
added 44 packages from 32 contributors and audited 17038 packages in 87.476s                                                                                                                                           
found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details


The output above was somewhat unuaual, but was it just advirtisement?
Next I run :

 npm audit fix
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 8.632s
fixed 0 of 1 vulnerability in 17038 scanned packages
  1 vulnerability required manual review and could not be updated

After that package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.4.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "cors": "^2.8.5",
        "remove": "^0.1.5",
        "v-tooltip": "^2.0.2",
        "vee-validate": "^2.2.5",
        "vee-validate-laravel": "^1.1.0",
        "vue-js-modal": "^1.3.31",
        "vue-moment": "^4.0.0",
        "vue-notification": "^1.3.16",
        "vue-router": "^3.0.6",
        "vue-select": "^3.1.0",
        "vue-slider-component": "^3.0.31",
        "vue2-filters": "^0.6.0",
        "vuecsv": "github:ynishi/vuecsv",
        "vuejs-paginate": "^2.1.0",
        "vuex": "^3.1.0"
    }
}

I tried to use this https://jsfiddle.net/ynishif/1ztu8x8q/ fiddle,
But I Got error referenced at my file :

app.js?dt=1560770053:2823 Uncaught ReferenceError: VueCSV is not defined
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Horizontal/personal/userLists/list.vue?
    
in /Horizontal/personal/userLists/list.vue:

<script>
    ... 
    import Vue from 'vue';
    Vue.component("csv-download", VueCSV.CsvDownload)

I am very confused as VueCSV is not defined anywhere, but it works if mentioned fiddle.
That seems somewhat tricky for me, as looks like I try to attach VueCSV with reference to its method and I do not see how it works in the fiddle above?
 
What did I miss?
 
Thanks!

Link to comment
Share on other sites

I tried this way and copied file vuecsv.min.js into my project as js/vuecsv.min.js.
In my laravel container file resources/views/index.blade.php
I include it after jquery and bootstrap files, but before app.js:
 

@include('footer')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('js/vuecsv.min.js') }}"></script>

<script src="{{ asset('js/metisMenu.min.js') }}"></script>
<script src="{{ asset('js/waves.min.js') }}"></script>
<script src="{{ asset('js/jquery.slimscroll.min.js') }}"></script>

<script src="{{ asset('js/powerange.js') }}"></script>

<script src="{{ asset('js/appInit.js') }}"></script>


<script src="{{ asset('js/app.js') }}{{ "?dt=".time() }}"></script>

</html>

After that in browser's console I see errors :

vuecsv.min.js:1 Uncaught TypeError: Cannot read property 'use' of undefined
at Object.<anonymous> (vuecsv.min.js:1)
at n (vuecsv.min.js:1)
at Object.<anonymous> (vuecsv.min.js:1)
at n (vuecsv.min.js:1)
at Object.<anonymous> (vuecsv.min.js:1)
at n (vuecsv.min.js:1)
at Object.<anonymous> (vuecsv.min.js:1)
at n (vuecsv.min.js:1)
at Object.<anonymous> (vuecsv.min.js:1)
at n (vuecsv.min.js:1)
(anonymous) @ vuecsv.min.js:1
n @ vuecsv.min.js:1
(anonymous) @ vuecsv.min.js:1
n @ vuecsv.min.js:1
(anonymous) @ vuecsv.min.js:1
n @ vuecsv.min.js:1
(anonymous) @ vuecsv.min.js:1
n @ vuecsv.min.js:1
(anonymous) @ vuecsv.min.js:1
n @ vuecsv.min.js:1
(anonymous) @ vuecsv.min.js:1
(anonymous) @ vuecsv.min.js:1
(anonymous) @ vuecsv.min.js:1
(anonymous) @ vuecsv.min.js:1
DevTools failed to parse SourceMap: http://127.0.0.1:8000/js/waves.min.js.map
DevTools failed to parse SourceMap: http://127.0.0.1:8000/js/metisMenu.js.map
app.js?dt=1560852335:2822 Uncaught ReferenceError: VueCSV is not defined
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js& (app.js?dt=1560852335:2822)
at __webpack_require__ (app.js?dt=1560852335:20)
at Module../resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js& (app.js?dt=1560852335:81388)
at __webpack_require__ (app.js?dt=1560852335:20)
at Module../resources/js/components/Horizontal/personal/userLists/list.vue (app.js?dt=1560852335:81352)
at __webpack_require__ (app.js?dt=1560852335:20)
at Module../resources/js/routes.js (app.js?dt=1560852335:81978)
at __webpack_require__ (app.js?dt=1560852335:20)
at Module../resources/js/app.js (app.js?dt=1560852335:80236)
at __webpack_require__ (app.js?dt=1560852335:20)


Any ideas why errors and how fix it ?
 

Link to comment
Share on other sites

Yes, 

I tried to change in resources/views/index.blade.php :

 

<script src="{{ asset('js/app.js') }}{{  "?dt=".time()  }}"></script>
<script type="text/javascript" src="{{ asset('js/vuecsv.min.js') }}"></script>


Did you mean this?

 

In this case erros in browser's  console :

app.js?dt=1560861461:2822 Uncaught ReferenceError: VueCSV is not defined
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js& (app.js?dt=1560861461:2822)
    at __webpack_require__ (app.js?dt=1560861461:20)
    at Module../resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js& (app.js?dt=1560861461:81388)
    at __webpack_require__ (app.js?dt=1560861461:20)
    at Module../resources/js/components/Horizontal/personal/userLists/list.vue (app.js?dt=1560861461:81352)
    at __webpack_require__ (app.js?dt=1560861461:20)
    at Module../resources/js/routes.js (app.js?dt=1560861461:81978)
    at __webpack_require__ (app.js?dt=1560861461:20)
    at Module../resources/js/app.js (app.js?dt=1560861461:80236)
    at __webpack_require__ (app.js?dt=1560861461:20)
./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js& @ app.js?dt=1560861461:2822
__webpack_require__ @ app.js?dt=1560861461:20
./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js& @ app.js?dt=1560861461:81388
__webpack_require__ @ app.js?dt=1560861461:20
./resources/js/components/Horizontal/personal/userLists/list.vue @ app.js?dt=1560861461:81352
__webpack_require__ @ app.js?dt=1560861461:20
./resources/js/routes.js @ app.js?dt=1560861461:81978
__webpack_require__ @ app.js?dt=1560861461:20
./resources/js/app.js @ app.js?dt=1560861461:80236
__webpack_require__ @ app.js?dt=1560861461:20
0 @ app.js?dt=1560861461:82391
__webpack_require__ @ app.js?dt=1560861461:20
(anonymous) @ app.js?dt=1560861461:84
(anonymous) @ app.js?dt=1560861461:87
app.js?dt=1560861461:75903 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
DevTools failed to parse SourceMap: http://127.0.0.1:8000/js/vue-slider-component.umd.min.js.map
vuecsv.min.js:1 Uncaught TypeError: Cannot read property 'use' of undefined
    at Object.<anonymous> (vuecsv.min.js:1)
    at n (vuecsv.min.js:1)
    at Object.<anonymous> (vuecsv.min.js:1)
    at n (vuecsv.min.js:1)
    at Object.<anonymous> (vuecsv.min.js:1)
    at n (vuecsv.min.js:1)
    at Object.<anonymous> (vuecsv.min.js:1)
    at n (vuecsv.min.js:1)
    at Object.<anonymous> (vuecsv.min.js:1)
    at n (vuecsv.min.js:1)

 

 

Link to comment
Share on other sites

I am not sure that I understand you, after installing of vuecsv.min.js I have
/node_modules/vuecsv/dist/vuecsv.min.js file
and in my vue file I tried to make like :

<script>

import {bus} from '../../../../app';
import appMixin from '../../../../appMixin';

//import
import VueCSV from '/vuecsv/dist/vuecsv.min.js'; // /node_modules/vuecsv/dist/vuecsv.min.js
Vue.use(VueCSV);

Vue.component("csv-download" , VueCSV.CsvDownload )


but in console I see error :

ERROR in ./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '/vuecsv/dist/vuecsv.min.js' in '/mnt/_work_sdb8/wwwroot/lar/wiznext/msg-laravel-application/resources/js/components/Horizontal/personal/userLists'
@ ./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js&) 124:0-48 127:8-14 132:30-36
@ ./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js&
@ ./resources/js/components/Horizontal/personal/userLists/list.vue
@ ./resources/js/routes.js
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/Horizontal/app.scss ./resources/sass/Horizontal/style_lg.scss ./resources/sass/Horizontal/style_md.scss ./resources/sass/Horizontal/style_sm.scss ./resources/sass/Horizontal/style_xs_320.scss ./resources/sass/Horizontal/style_xs_480.scss ./resources/sass/Horizontal/style_xs_600.scss



If i modify import line as :

import VueCSV from 'vuecsv'; // /node_modules/vuecsv/dist/vuecsv.min.js

I see error in npm console :

This dependency was not found:

* Vue in ./node_modules/vuecsv/dist/vuecsv.min.js

To install it, you can run: npm install --save Vue


sure I have vue installed.

Which way is right?
 

Link to comment
Share on other sites

I got errors in console :

$ npm install --save Vue
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/Vue - Not found
npm ERR! 404 
npm ERR! 404  'Vue@latest' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because 
npm ERR! 404  1. name can no longer contain capital letters
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/serge/.npm/_logs/2019-06-18T14_42_06_261Z-debug.log


and in mentioned log file :

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'install', '--save', 'Vue' ]
2 info using npm@6.9.0
3 info using node@v10.15.3
4 verbose npm-session 7023bc00e3afa995
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 404 https://registry.npmjs.org/Vue 937ms
8 http fetch GET 404 https://registry.npmjs.org/Vue 824ms
9 silly fetchPackageMetaData error for Vue@latest 404 Not Found - GET https://registry.npmjs.org/Vue - Not found
10 timing stage:rollbackFailedOptional Completed in 1ms
11 timing stage:runTopLevelLifecycles Completed in 3721ms
12 verbose stack Error: 404 Not Found - GET https://registry.npmjs.org/Vue - Not found
12 verbose stack     at res.buffer.catch.then.body (/usr/lib/node_modules/npm/node_modules/npm-registry-fetch/check-response.js:104:15)
12 verbose stack     at process._tickCallback (internal/process/next_tick.js:68:7)
13 verbose statusCode 404
14 verbose pkgid Vue@latest
15 verbose cwd /mnt/_work_sdb8/wwwroot/lar/wiznext/msg-laravel-application
16 verbose Linux 4.15.0-51-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "install" "--save" "Vue"
18 verbose node v10.15.3
19 verbose npm  v6.9.0
20 error code E404
21 error 404 Not Found - GET https://registry.npmjs.org/Vue - Not found
22 error 404
23 error 404 'Vue@latest' is not in the npm registry.
24 error 404 Your package name is not valid, because
25 error 404 1. name can no longer contain capital letters
26 error 404 Note that you can also install from a
27 error 404 tarball, folder, http url, or git url.
28 verbose exit [ 1, true ]

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.