mstdmstdd Posted June 18, 2019 Share Posted June 18, 2019 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! Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/ Share on other sites More sharing options...
requinix Posted June 18, 2019 Share Posted June 18, 2019 In the Fiddle, VueCSV is defined automatically because the source script is included through a <script>. You don't have that. But you do have something else... Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567658 Share on other sites More sharing options...
mstdmstdd Posted June 18, 2019 Author Share Posted June 18, 2019 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 ? Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567661 Share on other sites More sharing options...
requinix Posted June 18, 2019 Share Posted June 18, 2019 Where is Vue being loaded from? Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567662 Share on other sites More sharing options...
mstdmstdd Posted June 18, 2019 Author Share Posted June 18, 2019 In first lines of resources/js/app.js : Quote require('./bootstrap'); import Vue from 'vue'; import VueRouter from 'vue-router'; import Vuex from 'vuex'; Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567664 Share on other sites More sharing options...
requinix Posted June 18, 2019 Share Posted June 18, 2019 If that the app.js you're including after everything else? Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567665 Share on other sites More sharing options...
mstdmstdd Posted June 18, 2019 Author Share Posted June 18, 2019 Yes, it is in the end of resources/views/index.blade.php Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567667 Share on other sites More sharing options...
requinix Posted June 18, 2019 Share Posted June 18, 2019 ...the one you're including after VueCSV? Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567669 Share on other sites More sharing options...
mstdmstdd Posted June 18, 2019 Author Share Posted June 18, 2019 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) Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567670 Share on other sites More sharing options...
requinix Posted June 18, 2019 Share Posted June 18, 2019 So if you do it one way, one thing is undefined, and if you do it the other way, the other thing is undefined? If you're using app.js to bundle everything then try using it to bundle everything. Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567671 Share on other sites More sharing options...
mstdmstdd Posted June 18, 2019 Author Share Posted June 18, 2019 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? Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567673 Share on other sites More sharing options...
requinix Posted June 18, 2019 Share Posted June 18, 2019 What happens if you do that install command it suggests? Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567679 Share on other sites More sharing options...
mstdmstdd Posted June 18, 2019 Author Share Posted June 18, 2019 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 ] Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567680 Share on other sites More sharing options...
requinix Posted June 18, 2019 Share Posted June 18, 2019 Sounds like a problem with VueCSV. Considered looking for another package that does CSV? Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567681 Share on other sites More sharing options...
mstdmstdd Posted June 18, 2019 Author Share Posted June 18, 2019 Here https://github.com/vuejs/awesome-vue reviwed a lot and found only vuecsv . Could you please take a look or advice some ? Quote Link to comment https://forums.phpfreaks.com/topic/308859-error-referencing-vuecsvcsvdownload-method-in-vuejs-app/#findComment-1567684 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.