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 ☺️
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 initialized a new, empty Vue application using Vue version 3. I then tried to add the plugin Vuetify with the command vue add vuetify, but received the following error. Any ideas on how to solve it?
Currently possible with Vuetify 3 Alpha:
Installation
In order for the installation to proceed correctly, vue-cli 4.0 is required. Further instructions are available at vue-cli. (check with vue -V)
Once installed, generate a project with the following command using the vue-cli 4.0:
vue create my-app
When prompted, choose Vue 3 Preview:
? Please pick a preset:
Default ([Vue 2] babel, eslint)
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
It is recommended to commit or stash your changes at this point, in case you need to rollback the changes.
cd my-app
vue add vuetify
Once prompted, choose v3 (alpha):
? Choose a preset: (Use arrow keys)
Default (recommended)
Prototype (rapid development)
Configure (advanced)
> v3 (alpha)
Usage
With Vue 3.0, the initialization process for Vue apps (and by extension Vuetify) has changed. With the new createVuetify method, the options passed to it have also changed. Please see the pages in the Features section of the documentation for further details.
Next, navigate to your project directory and add Vuetify to your project:
import { createApp } from "vue";
import vuetify from "./plugins/vuetify";
import App from "./App";
const app = createApp(App);
app.use(vuetify);
app.mount("#app");
Source:
https://next.vuetifyjs.com/en/getting-started/installation/#installation
https://next.vuetifyjs.com/en/introduction/roadmap
As of July 2020 Vue 3 is unsupported by Vuetify 2.x. All components are being refactored for Vue 3 per Vuetify's task task list: https://www.notion.so/d107077314ca4d2896f0eeba49fe8a14?v=5cc7c08e9cc44021a7c86a20f189b0ba
While there is no Vuetify 3, I'd use Vue 2.x with Vuetify 2.x and install the Composition API as a package/plugin:
npm install #vue/composition-api
Then importing to your project (in main.js):
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
And finally using it in your component:
// use the APIs
import { ref, reactive } from '#vue/composition-api'
Just be aware of the limitations of this method.
Vuetify is not currently compatible with Vue 3.
Given the number of breaking changes and implementation differences in Vue 3, the entire library needs to be rewritten.
As of Jan 2021, they are targetting a Quarter 1, 2021 release for an alpha version, but the average user shouldn't expect to see a release version until late in the year, possibly even early 2022.
Until then, there are other alternatives that are Vue 3 compatible, such as Prime Vue. I believe they have Material Design themes that can be connected and a decent number of components (albeit slightly lacking in the v-app style feature coordination).
EDIT: The Vuetify v3 BETA is now available with a full release likely in Summer/Autumn of '22.
You can try vue 3 with the alpha of vuetify https://next.vuetifyjs.com/
You Must Install Vuetify 3 using the command
npm i vuetify#3.0.0-beta.11
and add it using the instruction from https://next.vuetifyjs.com/en/
As of today Dec-4-2022 Vue 3 is released for Months,
even vuetify#3.0.3 is released but the latest npm is'nt updated it is still in next even its not in beta anymore,
also the vue-cli is in Maintenance mode and for a new Vue project they recommend using the Vite base install
so the best solution is to install it from npm with the latest release from GitHub like
npm i vuetify#^3.0.0
I hope they update it soon so you can install it without the version number
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
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)