React-i18next createContext is not a function
Hello. I a troubleshoot with react-i18next for translate my app, during the import i18n.js in index.js, I a type error. I m not expert ReactJs and i not resolved this trouble with success, i need help please. Thanks
i18n.js:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
interpolation: {
escapeValue: false,
}
});
export default i18n;
Error in consol:
-> export var I18nContext = React.createContext();
"Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_3_react___default.a.createContext is not a function"
I fixed my problem :
run npm install react#latest and npm install react-dom#latest its worked for me
In package.json now reads
"react": "^16.8.6",
"react-dom": "^16.8.6"
Visit https://github.com/hasura/react-check-auth/issues/7#issuecomment-484208398
It is actually a version miss match so updating the your react-dom, react & redux packages would solve the issue
npm update react react-dom
Related
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.
Vue 3 + TypeScript. Trying to get fontawesome to work.
The following code results in errors in devtools (while the cli is
clean) - seems like props are undefined, so I tried various types of binding as well: :icon="['fa', 'redo']" - to no avail.
True that I am also getting a TS2307 over the vue-fontawesome
import, even though the package is installed and the index.d.ts with
correct member export export const FontAwesomeIcon is there. (v. 2.0.2)
Any clue on what is going wrong?
main.ts
// font-awesome
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'; // <-- TS2307 squiggles
import { faRedo } from '#fortawesome/free-solid-svg-icons';
library.add(faRedo);
// bootstrap
createApp(App)
.use(store)
.use(router)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app');
reload.vue (custom component)
<template>
<span #click="doReload">
Reload
<font-awesome-icon icon="redo" />
</span>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Reload',
setup(props, context) {
const doReload = () => {
context.emit('reload');
};
return {
doReload,
};
},
});
</script>
I'm actually not sure it's the only reason here, but: 2.0.2 version of vue-fontawesome actually has Vue 2 is its peer dependency, and you mentioned Vue 3 is used in your project. Quoting their doc:
Using Vue 2.x
$ npm i --save #fortawesome/vue-fontawesome#latest
Using Vue 3.x
$ npm i --save #fortawesome/vue-fontawesome#prerelease
The latter installs version 3.0.0-3, not 2.0.2.
it was working before in vue2 but now i don't know what's the problem!
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
// Import Font Awesome Icons
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
// import { } from '#fortawesome/free-brands-svg-icons'
// import { } from '#fortawesome/free-regular-svg-icons'
library.add(faUserSecret)
app.use(store).use(router).mount('#app')
// Use Components
app.component('font-awesome-icon', FontAwesomeIcon)
Vue
<font-awesome-icon icon="user-secret"></font-awesome-icon>
Make sure you got the right version of vue-fontawesome! I was having the same problem and installing version 3.x of the vue-fontawesome package solved it for me. It can be installed with NPM as follows:
$ npm i --save #fortawesome/vue-fontawesome#prerelease
Since Vue 3 is still in prerelease at the time of writing, this installation is bound to change in the future. Please check the official Github repo for up to date information.
In my laravel 5.7 / vuejs 2.5 app I use moment library to format datetime from db
It works in my component, but I have error when I try to wrap moment in my mixing as function with parameters.
package.json:
{
"private": true,
"devDependencies": {
"axios": "^0.18",
"vue": "^2.5.17"
...
},
"dependencies": {
"vue-moment": "^4.0.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
...
}
}
In resources/js/app.js :
import Vue from 'vue';
...
import moment from 'vue-moment'
Vue.use(moment)
In my component :
<template>
...
<hr>
<!-- THIS LINE WORKS OK-->
<span>{{ nextCategory.created_at | moment("dddd, MMMM Do YYYY") }}</span>;
<hr>
<!-- {{ momentDatetime(nextCategory.created_at,'Do MMMM, YYYY h:mm:ss A') }} -->
...
</template>
<script>
import {bus} from '../../app';
import appMixin from '../../appMixin';
export default {
name: 'list',
mixins: [appMixin],
</script>
But if to uncomment last line I got error
[Vue warn]: Error in render: "TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_moment___default(...) is not a function"
and in resources/js/appMixin.js :
import moment from 'vue-moment'
export default {
methods: {
...
momentDatetime(datetime, datetime_format, default_val) {
return moment(datetime).format(datetime_format);
},
...
I found this decison with “.format” method in net, but looks like it is invalid.
Which is the right way ?
Thanks!
Maybe like the other answer, you have to use moment instead of vue-moment.
Also there's a problem with the latest version of moment and one of the solutions posted here was downgrading to moment 2.18.1, maybe vue-moment is using another version.
Check this post with the same error as your question:
https://github.com/moment/moment/issues/4229
Also they reference this other issue:
https://github.com/moment/moment/issues/4216
You are using vue-moment instead of moment, so in your package.json add moment by running in your terminal npm install moment or yarn add moment, and then in your package.json you should see moment dependency
Also change the import in the mixin to import moment from 'moment'
Is there a way to install fontawesome in Vue? I tried few tutorials but they are all useless and do not work or icons are empty or plugin does not render at all!!!! I don't want to import the font by script, I want to install it in my application. I tried this tutorial (https://github.com/FortAwesome/vue-fontawesome) but whatever I did the icons do not render, maybe someone can point me to the solution?
Here is my code but the icons even do not render:
import FontAwesomeIcon from '#fortawesome/vue-fontawesome';
export default {
name: 'App',
components:{FontAwesomeIcon}
}
<template>
<div id="app"><font-awesome-icon icon="spinner" /></div>
</template>
also, I get an error in the console:
Check not find one or more icon(s) {prefix: "fas", iconName:
"spinner"} {}
I think you might be missing some dependencies. Please try
<script>
import fontawesome from "#fortawesome/fontawesome";
import brands from "#fortawesome/fontawesome-free-brands";
// import 1 icon if you just need this one. Otherwise you can import the whole module
import faSpinner from "#fortawesome/fontawesome-free-solid/faSpinner";
import FontAwesomeIcon from "#fortawesome/vue-fontawesome";
fontawesome.library.add(brands, faSpinner);
// or .add(brands, solid) if you need the whole solid style icons library/module
export default {
name: "App",
components: {
FontAwesomeIcon
}
};
</script>
Working example: https://codesandbox.io/s/ov6o0xk23y
Remember to load each icon that you are using. My icons weren't rendering because I forgot to add them to the library.
Template:
<icon icon="lock" />
JS:
import Vue from 'vue';
import { library } from '#fortawesome/fontawesome-svg-core';
import {
// import icons here
faLock,
} from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import App from './App.vue';
// add icons to library here
library.add(faLock);
Vue.component('icon', FontAwesomeIcon);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
Also, in the case that you are using multiple icons, it can be easier to import and load the whole set of icons e.g.
...
import { fas } from "#fortawesome/free-solid-svg-icons";
library.add(fas);
...
I had the same issue with:
package.json
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/vue-fontawesome": "^2.0.2",
Relying on a previous project where it worked, I upgraded #fortawesome/vue-fontawesome to ^3.0.0-4, which fixed the issue for me.
I was getting the following warning and not getting the icons displayed:
"export 'default' (imported as 'FontAwesomeIcon') was not found in '#fortawesome/vue-fontawesome'
Solution for me was to import an specific portion instead of going to default
changed from:
import FontAwesomeIcon from '#fortawesome/vue-fontawesome'
to
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'