I splitted some pieces of my code into separate files for better readability. Since, the Vite HMR is not working anymore. I get errors like the one below in the console :
ReferenceError: Cannot access 'axios' before initialization
I have this file structure :
app.js
import Vue from 'vue';
import './plugins/vue-axios';
new Vue({
...
render: (h) => h(App),
}).$mount('#app');
plugins/vue-axios.js:
import Vue from 'vue';
import VueAxios from 'vue-axios';
import axios from '../helpers/axios';
Vue.use(VueAxios, axios);
It works fine at the first build (dev or production). But the errors occurs when HMR tries to reload a component.
Related
How can I fix it? as the page not loading(showing a white page without anything else.)
WAIT Compiling...
98% after emitting CopyPlugin
WARNING Compiled with 4 warnings
warning in ./src/main.js
"export 'createApp' was not found in 'vue'
warning in ./src/router/index.js
"export 'createRouter' was not found in 'vue-router'
warning in ./src/store/index.js
"export 'createStore' was not found in 'vuex'
warning in ./src/router/index.js
"export 'createWebHistory' was not found in 'vue-router'
I just fixed another issue and now I got this. How can fix it please?
Those errors imply that you're trying to use the Vue 3 API (i.e., createApp), but you have vue#2.x installed (the vuejs2 tag is also a clue to that). Similarly, you're using Vue Router 4's API (i.e., createRouter), but you have vue-router#3.x installed.
Solution
You can either install the newest versions of the dependencies:
npm i -S vue#3 vue-router#4
Or you can use the older APIs. That is, switch from Vue 3 / Vue Router 4 code:
// main.js
import { createApp } from 'vue'
import router from './router'
createApp(App).use(router).mount('#app')
// router.js
import { createRouter } from 'vue-router'
export default createRouter(/*...*/)
...to Vue 2 / Vue Router 3 code:
// main.js
import Vue from 'vue'
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter(/*...*/)
I am a beginner with VueJs and this is my first App:
import { BootstrapVue } from 'bootstrap-vue'
import { createApp } from 'vue'
import App from './App.vue'
const myApp = createApp(App)
myApp.use(BootstrapVue)
myApp.mount('#app')
And when I save, nothing appears in my browser and it show this message in the Command:
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
Bootstrap-Vue does not yet support Vue 3.
So if you want to use Bootstrap-Vue you will have to stick with Vue 2 for now.
In general, most of the libraries don't support Vue 3 yet, so I would suggest waiting a bit longer before using it until the ecosystem has caught up.
Explanation
The reason this is happening is because in Vue 2, Vue provides a default export export default vue, which allows BootstrapVue to use import Vue from 'vue'.
However, in Vue 3 this has changed, and Vue does no longer provide a default export, and instead uses named exports. So when BootstrapVue uses the following line import Vue from 'vue', the error occurs.
import * as Vue from 'vue'
this works for me
I was getting the warning
"export 'default' (imported as 'Vue') was not found in 'vue'
I'm using Vue 3 but the code I'm studying is Vue 2.
My code Vue 2 in main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue ({
render: h => h(App),
}).$mount('#app')
So I needed to create a Vue instance with the following code Vue 2:
export const eventBus = new Vue ()
Then I received the error code, which I resolved by correcting the code that looked like this:
import { createApp } from 'vue'
import App from './App.vue'
export const eventBus = createApp(App)
createApp(App).mount('#app')
hi i am using laravel 9 mix and vue 3 here is my code app.js
// app.js
require('./bootstrap');
import { createApp } from 'vue'
import test from './components/Test.vue';
createApp({
components: { test }
}).mount('#app')
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue();
in my case, I use webpack and vue2.
I use vue-loader to handle .vue file . I found I installed vue-loader v17 which requires vue3, so I uninstall it and npm i vue-loader#15
On Vue 3 applications you have to use the following connection Vuex store
store.js
import { createStore } from "vuex";
import axios from "axios";
export default createStore({
state: {
},
mutations: {
},
actions: {
}
})
main.js
import store from '#/store';
...
app.use(store);
In my case, this looks like it was caused by some sort of corrupt node module somewhere. I solved the problem by running
rm -rf node_modules/
In my project root directory. This deletes your node_modules folder. Then I reran
yarn install
or
npm install
and the problem was fixed. Hope this helps someone else. Also, many have noted the differences between vue 3 and vue 2 dependencies, I'm not sure those are still relevant in 2022.
In my case it was the wrong resolve.alias directive in webpack.config.js, which set 'vue' to 'vue/dist/vue.js' instead of 'vue/dist/vue.esm.js';
If you're using Vuex, running:
npm remove vuex
npm i vuex#3
should fix this problem.
None of the current responses fixed the issue for me though mine was a little different; I control the component that was failing and I know it was made with Vue3.
In case someone hits this issue but with a component they control, it COULD be that you removed the setup attribute from your components <script> tag.
So changing
<script lang="ts">
to
<script setup lang="ts">
fixed it for me
const Vue = require('vue')
const AppImport = Vue.createApp("dev-axios");
import axios from 'axios';
import VueAxios from 'vue-axios';
AppImport.use(VueAxios,axios);
If you're just after the styles you can simply put
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
into your app.js file and it will work without errors.
I follows the Buefy guideline by
npm install Buefy
In main.ts
import Vue from 'vue';
import Buefy from 'buefy';
import axios from 'axios';
import VueAxios from 'vue-axios';
import 'buefy/dist/buefy.css';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
Vue.use(VueAxios, axios, Buefy);
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
In the Home.vue (view)
<section>
<b-button #click="clickMe">
Click Me
</b-button>
</section>
Then when I run, I get this error
Unknown custom element: <b-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Home> at src/views/Home.vue
<App> at src/App.vue
<Root>
I think Vue.use(Buefy) loads all components?
What am I missing to make Buefy works?
You can remove axios from the Vue instance Vue.use() because axios is not a plugin yet. You can instead use an operator with it instead to access it globally.
import Axios from 'axios'
Vue.prototype.$http = Axios;
Now you will be able to access using this.$http.post("https://api.com").then().catch()
Please note that use takes the first argument, You should use multiple Vue.use() to allow plugins to work well
I had to include the following lines in my tests/setup.js so that components are registered during test setup.
import Buefy from 'buefy';
Vue.use(Buefy)
My main.js was not executed for tests.
I am new to testing with jest, so maybe this is a monstrosity, and there are better ways to do it. But it worked for me.
I have created a new project using vue-cli 'vue init webpack-simple my-app' command. In that fresh installation copy, I'm trying to import vue-router in the App.vue component that was created by default. But it is giving me an error: 'Uncaught ReferenceError: Vue is not defined'. If I import the vue again in App.vue, then the app is working fine. But I already imported the vue in main.js, so why do I need to import it again in App.js? Is there any way I can use the imported vue from main.js? Here is my code:
main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue'; //**why I need to import it again? I already imported it in main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import QuestionOne from './components/QuestionOneTemplate';
const routes = [
{ path: '/', name: 'QuestionOne', component: QuestionOne },
];
const router = new VueRouter({
routes
});
window.router = router;
export default {
router,
name: 'app',
data () {
return {
}
}
}
</script>
<style lang="scss">
</style>
Is there any way i can use the imported vue from main.js?
No, you need to import it in every file that uses Vue. The imports/requires are how things get hooked up. Rest assured, each import will be the same singleton instance.
You can get to the router from a Vue component's javascript using this.$router and this.$route without an import, or inside a template, using simply $router and $route
Not recommended, but you can assign Vue to a global in main.js, and use the global without importing.
main.js
import Vue from 'vue';
global.MyVue = Vue
App.vue
import VueRouter from 'vue-router';
MyVue.use(VueRouter);
Why
This is how ES6 links things up. Consider it wiring. If there were more than 1 Vue lib available, how would the linker know which to use? What if another library defined a variable or function called Vue? Perhaps a lib uses its own internal Vue for an event bus or other feature.
Other Thoughts
The explicit import also makes IDE autocompletion and syntax highlighting work better. Some IDEs can add the imports automatically, and that makes life easier.
did you try this ?
import Vue from 'vue'
import VueRouter from 'vue-router'
then use
Vue.use(VueRouter)
because the error message means you need to import vue first to use vue-router
You did the right thing and you don't have to worry about importing Vue in multiple files. When you are shipping your application and build it for production, you will have only one "Vue import". If you take a look at dist folder and your bundled .js files you will notice that Vue is imported only once.
The documentation says like this:
<script type="text/javascript" src="assets/js/vue-shopify-products.js"></script>
And then before you initialize vue, you do this:
Vue.use(ShopifyProducts);
What do you do if you use vue-cli webpack template?
My main.js file looks like this
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import * as d3 from 'd3'
import * as shopifyProducts from 'vue-shopify-products'
Vue.config.productionTip = false
Vue.use(shopifyProducts)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>',
created: function () {
d3.csv('/static/data/csv-files/bicycles.csv', (data) => {
let products = this.$formatProducts(data)
console.log(products)
})
}
})
This doesn't work as I get the error 'Uncaught (in promise) TypeError: _this.$formatProducts is not a function'. What is the correct way to include Vue-Shopify-Products and reference the $formatProducts function?
Since it is an npm package installed as a dependency, you should import it this way,
import defaultExport from "module-name";
so this should work:
import ShopifyProducts from "vue-shopify-products";
Vue.use(ShopifyProducts);
After that you can get rid of the script reference of the module.
Edit 1:
I don't think is going to work since the module you are trying to use as a Vue plugin do not follow the conventions especified on the Vue documentation.