Vue-i18n does not offer a default export option

Hello everyone! This is my first experience using vue-i18n in a project with TypeScript + Vue. Following the instructions from the official site, I installed it using yarn install vue-i18n. Next, I tried to import it into main.ts using import VueI18n from 'vue-i18n', but encountered the following error. Can anyone help me understand why this is happening and how I can resolve it? Thank you in advance.

Module 
'"/Users/scott/Desktop/Pando/uikit-main/node_modules/vue-i18n/dist/vue-i18n"' 
has no default export. 
Did you mean to use 'import { VueI18n } from "/Users/scott/Desktop/Pando/uikit-main/node_modules/vue-i18n/dist/vue-i18n"' instead?ts(2613)

The version of vue-i18n I am using is 

"vue-i18n": "^9.1.9"
. When I try importing vue-i18n as suggested and continue with Vue.use(VueI18n), another error occurs.

'VueI18n' only refers to a type, but is being used as a value here.ts(2693)

I suspect that this is because vue-i18n only exports some interfaces.

(alias) interface VueI18n<Messages = {}, DateTimeFormats = {}, NumberFormats = {}>
import VueI18n

Upon further investigation, I realized that the keyword VueI18n in the import statement does not have a default export.

typescriptvue.jsvue-i18n

Answer №1

When importing, be sure to use 

import { createI18n } from 'vue-i18n'

Avoid importing it as 

import VueI18n from "vue-i18n"
since it does not have an export default.

Answer №2

Have you attempted to duplicate the route exactly as shown (I prefer using Vscode), and then paste it into the import section to ensure that there are no errors in the route?

https://i.sstatic.net/SdgRO.png

You can also test importing with this code import { VueI18n } from "/Users/scott/Desktop/Pando/uikit-main/node_modules/vue-i18n/dist/vue-i18n" instead of VueI18n from 'vue-i18n'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a problem while deploying Vue to GitHub Pages due to issues with vue-router

I encountered some difficulties while deploying a Vue application built with vue-cli v3.0 to GitHub Pages. I utilized subtree to only deploy the dist folder to the gh-pages branch. Initially, the issue was that the assets were not being found, but I resolv ...

vue.jsgithub-pagesvue-routervue-cli

Utilizing Vue Router for service integration

I have configured my vue router for external components and services, setting it up as follows: /* Router.ts */ import { myRoute } from './views/myRoute.vue' const router = { routes: [ { name: 'my-router', ...

vue.jsvue-router

Using v-model with variables in Vue

In my form, I am encountering an issue with a textarea field when inserting a value from the database (using Laravel 10 and Inertia) where it is not being displayed. However, in other instances, the value appears as expected. It seems that there is a confl ...

javascriptvue.jsinertiajsv-model

Error in React: Trying to access property 'functionName' of an undefined object on click event

I am facing an issue while trying to click a button in my React component that is supposed to trigger a function with a parameter named "item" which is defined within the function. The pseudo-HTML snippet for this scenario looks like: <div>{item.cre ...

reactjstypescriptspfx

I don't understand why I'm receiving the error message "Unsafe assignment of an `any` value" when I clearly defined the value as a string with a default value

I am puzzled by the 2 eslint errors in this code snippet. The property is declared as a string with a default value: export default { name: '...', props: { x: { type: String, required: true, default: '' } ...

typescriptvuejs3eslint

Set the styling of a div element in the Angular template when the application is first initialized

I have a question about this specific div element: <div class="relative rounded overflow-clip border w-full" [style.aspect-ratio]="media.value.ratio"> <img fill priority [ngSrc]="media.value.src || ftaLogo" ...

htmlcssangulartypescriptdom

Ways to prevent committed mutation in Vuex

Can you halt a mutation in vuex post commit? In the case of redux, we can determine that an action is halted if next is not invoked in middleware. ...

vue.jsvuex

Tips for designing a unique style attribute for your Vue.js component

My goal is to utilize Vue.js without the need for a build step, but I've encountered an issue with its lack of a style property. To tackle this problem, I came up with the idea of creating a custom "style" property on my Vue component instance and dy ...

javascriptvue.jsvue-component

Angular 5 Directive for Structuring Content

I'm currently in the process of developing a versatile search box component, with the following setup: search.component.html <div class="search-box-container"> <fa-icon class="search-icon" [icon]="faSearch"></fa-icon> <input ...

angulartypescript

Having trouble with errors when adding onClick prop conditionally in React and TypeScript

I need to dynamically add an onClick function to my TypeScript React component conditionally: <div onClick={(!disabled && onClick) ?? undefined}>{children}</div> However, I encounter the following error message: Type 'false | (() ...

javascriptreactjstypescript

Deselect a CheckBox along with its corresponding label using VueJS

I am currently working on unchecking a checkbox that is already checked using its label in VueJs. DEMO: new Vue({ el: '#app', data: { checkedNames: [], checkedName: true }, methods: { uncheck: function() { this.check ...

htmlcheckboxvue.jsvuejs2state

Set up specific vue.config.js configurations for unique environments in Vue

I am working on a multi-page app where I want certain pages to only show up in my development environment. Here's how my vue.config.js looks: module.exports = { productionSourceMap: false, pages: { index: "src/main.js", admin: { ...

javascriptvue.js

What is the best way to manage events within datalist options using Vue.js?

I have a specific requirement where I need to implement a feature in my data list. When a user selects an option from the datalist, I must update other input fields based on that selection. Below is the code snippet for my input field and Datalist: <i ...

javascriptjqueryvue.jsvuejs2html-datalist

Personalized angular subscription malfunction

Recently, as I dive into learning Angular 6, a question has arisen regarding the subscribe method and error handling. A typical use of the subscribe function on an observable typically appears like this: this.myService.myFunction(this.myArg).subscribe( ...

angulartypescripthttp

Vue.js: axios unexpectedly running synchronously across multiple components instead of asynchronously

Upon initializing my component, I am attempting to load ajax data. However, I have noticed that this causes other items loaded via ajax in the created() method to load synchronously rather than asynchronously. When this specific ajax request is triggered, ...

javascriptajaxvue.jsvuejs2axios

Only displaying sub items upon clicking the parent item in VueJS

I'm in the process of designing a navigation sidebar with main items and corresponding sub-items. I want the sub-item to be visible only when its parent item is clicked, and when a sub-item is clicked, I aim for it to stand out with a different color. ...

javascripthtmlcssvue.jsvuejs2

Displaying Well-Formatted XML in Angular2 Using Typescript

After receiving this XML string from the server: <find-item-command xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" find-method="Criteria" item-class="com" only-id="false" xsi:schemaLocation=""> <criteria> <criterion> <descripto ...

javascriptxmlangulartypescriptpretty-print

Is it possible to display Angular Material Slider after the label?

Searching through the Angular Material docks, I came across the Sliders feature. By default, the slider is displayed first, followed by its label like this: https://i.sstatic.net/C5LDj.png However, my goal is to have the text 'Auto Approve?' sh ...

angulartypescriptangular-material

What is the best way to outline this model using typescript?

Here is a JSON model that I am working with: { "loggers" : { "logger1" : { "name" : "logger1", "level" : "DEBUG", "sub_loggers" :{ "logger1.nested_logger1" : { "name": "lo ...

typescripttypescript-typings

Is it possible to make the 'keyof' property optional?

Illustrate an interface in the following way interface Properties { apple?: string banana?: string cherry?: string date: string } Executing this code works as expected type Sample1 = { [P in keyof Properties]: Properties[P] } const s1: Sample1 ...

typescriptoption-typerequiredkeyof