Unable to export Interface in Typescript - the specific module does not offer an export named Settings

Question

Unable to export Interface in Typescript - the specific module does not offer an export named Settings

I am encountering an issue while trying to export/import an interface in Typescript. The error message I receive is causing confusion as I'm unsure of where I went wrong.

Uncaught SyntaxError: The requested module '/src/types/settings.ts' does not provide an export named 'Settings'

Within my types/settings.ts file, the code is as follows:

export interface Settings {
    activeUser: number
}

To import the interface, I use the following syntax:

import { Settings } from '@/types/settings'

In addition, here is a snippet from my tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "baseUrl": "./src/",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "paths": {
      "@/*": ["src/*"],
    },
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "isolatedModules": false
  },

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

My development environment consists of Vue/Vite with Typescript integration.

javascript typescript vue.js vuejs3 vite

Answer 1

Answer №1

Isn't it strange that when you run npm run build, everything works perfectly, but running npm run dev results in a SyntaxError?

I had no choice but to use import type { ..., which also required me to touch the Ref from the vue library.

A workaround solution was shared on GitHub for the Vite issue 731, which can be found at this link

Answer 2

Isn't it strange that when you run npm run build, everything works perfectly, but running npm run dev results in a SyntaxError?

I had no choice but to use import type { ..., which also required me to touch the Ref from the vue library.

A workaround solution was shared on GitHub for the Vite issue 731, which can be found at this link

Answer 3

Answer №2

It seems like the issue may stem from importing interfaces without explicitly declaring them as type. For Vite to work properly, isolatedModules must be set to true, which in turn requires handling interfaces in a specific way:

interface IFoo { bar: string; }
export type { IFoo };

Keep in mind that if you are using barrel files (index.ts) structured like this:

export { IFoo } from './foo';

You should adjust them to look like this instead:

export * from './foo';

Alternatively, you can do it like this:

import type { IFoo } from "./foo";
export type { IFoo };

Another workaround is to set skipLibCheck to true in tsconfig.json, but this may result in reduced type strictness.

Answer 4

It seems like the issue may stem from importing interfaces without explicitly declaring them as type. For Vite to work properly, isolatedModules must be set to true, which in turn requires handling interfaces in a specific way:

interface IFoo { bar: string; }
export type { IFoo };

Keep in mind that if you are using barrel files (index.ts) structured like this:

export { IFoo } from './foo';

You should adjust them to look like this instead:

export * from './foo';

Alternatively, you can do it like this:

import type { IFoo } from "./foo";
export type { IFoo };

Another workaround is to set skipLibCheck to true in tsconfig.json, but this may result in reduced type strictness.

Answer 5

Answer №3

When referencing entries in paths, remember that they are resolved relative to the baseUrl. Consider these options:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

You could also try this alternative configuration:

{
  "compilerOptions": {
    "baseUrl": "./src/",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Answer 6

When referencing entries in paths, remember that they are resolved relative to the baseUrl. Consider these options:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

You could also try this alternative configuration:

{
  "compilerOptions": {
    "baseUrl": "./src/",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Answer 7

Answer №4

Try this approach, it could potentially resolve the issue.

import {StateType} from "@/models/app.models";

Answer 8

Try this approach, it could potentially resolve the issue.

import {StateType} from "@/models/app.models";

Unable to export Interface in Typescript - the specific module does not offer an export named Settings

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for customizing the Electron title bar and enabling drag functionality

Modifications performed on the Xhtml generated from xml and XSLT should be mirrored back into the original XML document

Tips on configuring ESLint to correctly format and validate rules in Visual Studio Code?

An issue has been detected with the width attribute in Typescript when using

What is the most effective way to send messages from Typescript to C#?

Unable to display image in Vuetify data table slot

Picture goes missing from slideshow

An issue arose when attempting to proxy to: localhost, at port 4200, for the API endpoint v1/generate

Enhance the php query limit using javascript when loading additional content

A guide to updating a button in Angular:

"Interactive bootstrap tabs nested within a dropdown menu that automatically close upon being clicked

Implementation of async operations using while loop in Node.js

Unable to view loggly-winston debug logs on the user interface

Tips for Creating an Animated Progress Bar in a Slider

How to remove a loop-rendered component from the DOM in Vue

Element eradicated by mysterious force - what is the reason behind this destruction?

Creating a Form with Dynamic HTML when Button is Clicked

What could be causing the onClick event handler to trigger twice in my create-react-app?

Mandating the inclusion of a directives controller in conjunction with other necessary controllers

What could be causing a react element to fail to update?