When adding vue-virtual-scroller using yarn I get the following error
No matching export in "node_modules/vue/dist/vue.esm-bundler.js" for import "default"
node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js:4:7:
4 │ import Vue from 'vue';
╵ ~~~
I tried deleting node-modules and re-installing the package multiple times. But the error remains. Any idea how to solve this? Using Vue3.
It looks like the installed version of the plugin is still targeting Vue 2.
You have to install vue-virtual-scroller#next for Vue 3 ☺️
Related
I'm trying to use bootstrap-vue on my Vue-JS 3 project, but i got an error
Using npm run serve
And in my browser I got
Error on the browser
i used this command in my terminal
npm install vue bootstrap bootstrap-vue
and here is my main.js code
import { createApp } from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
createApp(App).use(BootstrapVue).use(IconsPlugin).mount('#app')
Anyone knows how to fix it? I saw is because something had changed from Vue 2 to 3, but i saw a project in Vue JS 3 already running with bootstrap so i guess this bug have fixed
Problem: Bootstrap-Vue is not yet compatible with Vue.js 3.
https://cdmoro.github.io/bootstrap-vue-3/
Use this its not fully released but works well, I'm using it in a several projects
cheers
I am following a tutorial on YouTube about Vue, everything was working fine until I installed Bootstrap Vue and I ran npm run serve, I keep getting this error:
98% after emitting CopyPlugin
WARNING Compiled with 2 warnings 2:21:24 AM
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./node_modules/bootstrap-vue/esm/vue.js
"export 'default' (reexported as 'Vue') was not found in 'vue'
BootstrapVue isn't compatible with Vue 3 yet:
BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4.5 component and grid system available for Vue.js v2.6
You'll either have to use Vue 2, use Vue 3 without Bootstrap or find another component library which is compatible with Vue 3.
I cloned an existant Vuejs project and made a "npm install".
Everything installed well except "moment" and maybe "vue-moment".
i've got this error :
Failed to compile.
./src/main.js
Module not found: Error: Can't resolve 'moment' in '/app/src'
so in installed them with "npm install --save moment vue-moment"
And still got the error.
here some code of my main.js file :
import moment from 'moment'
import VueMoment from 'vue-moment'
// Vue use moment.js
Vue.use(VueMoment, {
moment
});
moment.locale('fr');
the packages are installed and present in the node_modules folder and are present also in the package.log.json and package.json.
The weird things is, when other people clones this project, they don't have the problem. only me...
One (maybe) pist, is when i put my mouse hover the 'moment' (of the import), i see this :
.../node_modules/moment/moment like there is 2 moment folders, but it looks normal in the node_modules folder.
Thanks in advance!
EDIT SOLVED :
The problem was because i started the project with "docker-compose up" and not "npm run serve" on the FRONT. It started but i had this "moment" problem. Now it works well with the good console code to start the project ...
You cannot use the import function with moment.js since exports is not defined for that module. So you have to use require. You can do this :
Vue.use(require('vue-moment'));
If you really want to use moment.js using import you can do this as well.
import * as moment from 'moment';
Reference: https://www.npmjs.com/package/vue-moment
https://momentjs.com/docs/
Webpack / typescript require works but import doesn't
The project I'm testing is working fine, but after running npm run dev on my project, I get this warning message:
WARNING Compiled with 1 warnings 17:06:47
warning in ./node_modules/Vuex/dist/vuex.esm.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/me/code/vue/vuex-test/node_modules/Vuex/dist/vuex.esm.js
Used by 1 module(s), i. e.
/Users/me/code/vue/vuex-test/node_modules/babel-loader/lib/index.js!/Users/me/code/vue/vuex-test/node_modules/vue-loader/lib/selector.js?type=script&index=0!/Users/me/code/vue/vuex-test/src/components/Test.vue
* /Users/me/code/vue/vuex-test/node_modules/vuex/dist/vuex.esm.js
Used by 1 module(s), i. e.
/Users/me/code/vue/vuex-test/node_modules/babel-loader/lib/index.js!/Users/me/code/vue/vuex-test/src/store/store.js
It's caused by the line import Vuex from 'vuex' in my ./store/store.js file which is called by import store from './store/store' in my main.js.
Is it a bug in Vuex module or is there a way I can fix it in my code ?
I have solved it.
By uninstalling vuex 4.0 version
npm uninstall vuex
and install vuex 3.0 version
npm install vuex#3.
I have faced similar issue. I have stopped the app and restarted it again using npm run dev and the error gone.
I was using
import Vuex from 'vuex';
itself but seems like that is not a problem
The line:
import Vuex from 'vuex'
Should be written:
import Vuex from 'Vuex'
I'm using an Electron boilerplate, from here: https://github.com/szwacz/electron-boilerplate/
It's using gulp-rollup to bundle the assets, and a dev server can be run with npm start.
Here are my import statements from app.js:
import os from 'os';
import { remote } from 'electron';
import jetpack from 'fs-jetpack';
import env from './env';
import jquery from 'jquery';
import parsley from 'parsleyjs';
import select2 from 'select2/dist/js/select2.js';
import { setupForm } from './form/form';
Everything works fine on an initial load with npm start, but as soon as I edit a file and save, which triggers the watch to reload the build, I get an error:
Error: Could not load select2/dist/js/select2.js (imported by /##/repo-name-example/src/app.js): ENOENT: no such file or directory, open 'select2/dist/js/select2.js'
at /##/repo-name-example/node_modules/rollup/dist/rollup.js:9428:10
at process._tickDomainCallback (internal/process/next_tick.js:129:7)
If I cancel the process and just npm start again, everything is fine.
Why would it forget where select2 is?
Since you are importing this manually using a file path, rather than a named import like the jquery line, you need to use
import select2 from './select2/dist/js/select2.js';
Note the ./ at the beginning. Otherwise, it effectively looks for a module called select2/dist/js/select2.js, rather than using the path.
You also might need to do change it to
import select2 from './node_modules/select2/dist/js/select2.js';
(Assuming thats where the folder is)