Issue with Vue / Typescript: Unable to locate module 'vue-simplemde'

Most npm modules, like axios and firebase, import with no issues, but oddly enough import MDE from 'vue-simplemde' generates an error:

Cannot find module 'vue-simplemde'.Vetur(2307)

Here's the code snippet:

<script lang="ts">
   import Vue from 'vue'
   import firebase from 'firebase/app' // Works!
   import MDE from 'vue-simplemde' // Cannot find module 'vue-simplemde'.Vetur(2307)
   import axios from 'axios' // Works!

   export default Vue.extend({
       [...]
   })
</script>

In the package.json file:

[...]
"dependencies": {
    [...]
    "firebase": "^7.14.4",
    "vue-simplemde": "^1.0.6",
    [...]
  },
[...]

The editor functions after compiling the code, but the error persists. I could suppress the error with // @ts-ignore, but it causes type checking problems throughout the rest of the Vue component, generating 

Property XX does not exist on type CombinedVueInstance...
errors. Disabling this import resolves those issues.

Is there a way to make this package compatible with TypeScript?
Can I declare a module in some manner?

typescriptvue.jsimportnode-modules

Answer №1

A module declaration is necessary for this to work.

Assuming you have a file named "shims-vue.d.ts" in your directory src. If not, be sure to create one.

// shims-vue.d.ts
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

declare module "vue-simplemde" {
  const mde: any;
  export default mde;
}

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

What is the best way to clear all content from the "textarea" and input fields after submitting?

I'm currently using a Devextreme library for my project. I am having trouble finding a way to clear all the textarea information in the component along with other inputs when clicking on the Save button. Despite trying various methods, I have not bee ...

angulartypescriptdevextreme

The Card Component from Core UI fails to appear in the Print Preview feature

I'm currently experimenting with the Card Component from the Core UI framework. However, I'm facing an issue where the color of the Card component and its associated icon do not appear in the Preview when trying to print the page. I attempted to ...

cssvue.jscore-ui

Limiting the character input in ion-textarea within Ionic 2: A step-by-step guide

In my Ionic 2 application, I need to limit user comments to less than 500 characters in a text area. What is the best way to implement this restriction? ...

csstypescriptionic-frameworkionic2

Issue with Vue 3 binding when select option is not displaying in updated values, causing select to remain blank instead of changing to an empty value

Having two components - an Input and a Select, where the options displayed in the select depend on what is inputted in the Input. If the selected option is not present in the new set of options, either choose the default option or the first option "select ...

vue.jsselectinputbindingvue-component

Ways to expand a TypeScript interface and make it complete

I'm striving to achieve the following: interface Partials { readonly start?: number; readonly end?: number; } interface NotPartials extends Partials /* integrate Unpartialing in some way */ { readonly somewhere: number; } In this case, NotPar ...

javascripttypescript

Incorporating TypeScript into a project that already contains .js files

I currently have a NodeJS project with .js files written in ES6. I am interested in integrating typescript into this existing project. What steps should I follow? Can I simply introduce .ts files within the same directory structure? One issue I have encou ...

node.jstypescriptecmascript-6

Fill out FormBuilder using data from a service within Angular2

I am working with an Angular2 model that I'm filling with data from a service. My goal is to use this model to update a form (created using FormBuilder) so that users can easily edit the information. Although my current approach works, I encounter er ...

javascriptangulartypescript

When validation fails, all fields are highlighted in the Div containing the FormGroup

In my Angular application, I need to utilize two fields - produced date and expiry date. It is important to note that I must use <div [formGroup]...> since this component will be called within other forms. Using the form tag here is not an option. ...

angulartypescriptvalidationformbuilderformgroups

Encountering a SSR issue while developing an API in Nuxt with the Router Module?

I am using Nuxt with the Router Module. Currently, I am writing my API calls in the following way: <template> <div class="row flex"> {{posts.id}} </div> </template> <script> import axios from 'axios' imp ...

vue.jsvuejs2vue-routernuxt.js

Encountering difficulties running Angular application because of errors related to ɵɵinject and ɵɵdefineInjectable during compilation

Encountering this issue after running npm install: +-- UNMET PEER DEPENDENCY @angular/[email protected] +-- UNMET PEER DEPENDENCY @angular/[email protected] `-- [email protected] Getting this error after compiling: WARNING in ./node_mod ...

javascriptangularnpmangular6node-modules

What is causing this TypeScript error to be raised by this statement?

Can you explain why the following statement is throwing a type error? const x: Chat = { ...doc.data(), id: doc.id } The error message states: Type '{ id: string; }' is missing the following properties from type 'Chat': message, name, ...

typescriptfirebasevue.jsgoogle-cloud-firestore

I am currently facing an issue with Vue Cli 3 where I am unable to process SVG files using Webpack

By default, Vue Cli uses file-loader for SVG assets. However, I want to use svg-sprite-loader and a few other loaders instead. I have made changes to the vue.config.js file in order to achieve this, but it seems like the configuration is not being applied ...

javascriptwebpackvue.jsvuejs2vue-cli

What is the best method to connect Vue state data with a database?

I currently handle user actions that edit data by sending an API call and then refreshing my app to re-download all relevant data from the database for the view to update accordingly. Would it be more efficient to directly edit data in my Vuex state, with ...

vue.jsvuex

The TypeScript @types modules are struggling to find resolution with one another

When attempting to install TypeScript definitions using npm, such as with the following command: npm install --save @types/express I encountered an issue where the installed modules were failing to resolve each other. For instance, @types/express require ...

node.jstypescripttypescript2.0

Utilizing Protractor's advanced filtering techniques to pinpoint the desired row

I am trying to filter out the specific row that contains particular text within its cells. This is my existing code: private selectTargetLicense(licenseName: string) { return new Promise((resolve => { element.all(by.tagName('clr-dg-tab ...

javascriptangulartypescriptprotractor

Is there a way to send a post request containing a base64 encoded image?

I am currently developing an image upload component in Vue.js that includes a custom cropping option. The cropped version of the image is saved in my state as a base64 string, like this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAHgCAYAAAB91L6 ...

node.jsapivue.jspostman

Storing Vuex updates for multiple tabs - Tips and tricks

I am encountering an issue with my Vue app that uses Vuex. When I have multiple tabs open, any changes made to the store in one tab do not reflect in the other. Is there a way to ensure that the store/data is synchronized instantly across all tabs? const ...

vue.jsvuex

Different ways to pass a component function's return value to a service in Angular

On my HTML page, I am presenting job details within Bootstrap panels sourced from a JSON array using an ngFor loop. Each panel showcases specific job information along with a unique job ID. The panel is equipped with a click event which triggers the execut ...

angulartypescriptapi

Building a BaseObserver in TypeScript with RxJS

Initially, I created a class called BaseObserver in Swift. In the subscribe method, I pass this class. Now, I am attempting to achieve the same functionality in RxJS using TypeScript. This approach proves useful when you need to execute actions both befor ...

typescriptrxjsrx-swiftreactivex

What is the method to access programmatically generated refs in vue.js?

In a vue.js component, I am trying to access dynamically created refs in the following manner: <style> </style> <template> <div> <lmap class="map" v-for="m in [1, 2, 3]" :ref="'map' + m"></lmap> </d ...

vue.jsvue-component