CODEWITHSUNDEEP
typescriptvue.js
orezvani
orezvani

Reputation: 3775

Importing external JavaScript code in TypeScript - Cannot find module or its corresponding type declaration

I have purchased a VueJS admin template that is written in JS and need to infuse it with my current TS application. When I copy the components, views and other pieces, I get the following error. Is it possible to fix this without directly modifying the external codes? I need to come up with a permanent way that is persistent after updates.

Here is the error:

ERROR in /Users/username/MyApplicationDirectory/src/main.ts(17,32):
17:32 Cannot find module './components/TroubledComponent' or its corresponding type declarations.
    15 | 
    16 | // Custom components
  > 17 | import TroubledComponent from './components/TroubledComponent'
       |                                ^
    18 | import X from '@/components/X'
    19 | import Y from '@/components/Y'
    20 | import Z from '@/components/Z'

Here is my tsconfig.json content:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    // Tells TypeScript to read JS files, as
    // normally they are ignored as source files
    "allowJs": true,
    // Generate d.ts files
    "declaration": true,
    // This compiler run should
    // only output d.ts files
    "emitDeclarationOnly": true,
    // Types should go into this directory.
    // Removing this would place the .d.ts files
    // next to the .js files
    "outDir": "dist"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
  ],
  "exclude": [
    "node_modules"
  ]
}

Here is my package.json content:

{
  "name": "oneui-vue-edition",
  "version": "1.6.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-modern": "vue-cli-service build --modern",
    "lint-fix": "vue-cli-service lint --fix"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.31.1",
    "@typescript-eslint/parser": "^4.31.1",
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-eslint": "^4.5.13",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^7.17.0",
    "fibers": "^5.0.0",
    "sass": "^1.40.1",
    "sass-loader": "^10.2.0",
    "typescript": "~4.1.5",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier/@typescript-eslint"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    ">= 1%",
    "last 1 major version",
    "not dead",
    "Chrome >= 45",
    "Firefox >= 38",
    "Edge >= 12",
    "iOS >= 9",
    "Safari >= 9",
    "Android >= 4.4",
    "Opera >= 30"
  ]
}

Here is my the import of the component in my main.ts:

import TroubledComponent from '@/components/TroubledComponent'

For reference, here is the high-level code of the component:

<template>
  <component
    ...stuff
  >
    <slot></slot>
  </component>
</template>

<script>
export default {
  name: 'TroubledComponent',
  props: {
    // props
  },
  methods: {
    // methods
  }
}
</script>

NodeJS version: v14.17.6

I tried the following and I still get the error: 1- I added lines 29-40 in the tsconfig.json file to automatically add declarations, but still getting same error.

Upvotes: 2

Views: 3128

Answers (1)

orezvani
orezvani

Reputation: 3775

I finally solved this issue by

  1. Running the command vue add typescript to make sure all required typescript files are present
  2. Ensuring my shims file has the correct information : VueJS/Typescript - Cannot find module './components/Navigation' or its corresponding type declarations
  3. In my import changing import TroubledComponent from '@/components/TroubledComponent' to import TroubledComponent from '@/components/TroubledComponent.vue'

For other JavaScript files, such as directives, I simply had to add "allowJs": true to my tsconfig.json.

I wish there was a way to add a declaration in modulename.d.ts for the directives , but it kept telling me File ...../directives/mycrazydirective.d.ts' is not a module. So I gave up for now until I find a better solution.

Upvotes: 1

Related Questions