I recently acquired a VueJS admin template built in JS and am looking to integrate it into my existing TS application. However, when I attempt to transfer the components, views, and other elements, I encounter the following error message. Is there a way to resolve this issue without directly modifying the external code? I need a sustainable solution that will persist through updates.
Below 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'
This is the content of my tsconfig.json:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
// Other configurations...
},
"include": [
"src/**/*.ts",
"tests/**/*.ts"
],
"exclude": [
"node_modules"
]
}
Here is the fragment of the package.json:
{
"name": "oneui-vue-edition",
"version": "1.6.0",
"scripts": {...},
// Dependency information...
}
The import statement for the component in question within my main.ts:
import TroubledComponent from '@/components/TroubledComponent'
A snippet showcasing the structure of the troubled component:
<template>
<component>
...content
</component>
</template>
<script>
export default {
name: 'TroubledComponent',
props: {
// properties
},
methods: {
// functions
}
}
</script>
NodeJS version being used: v14.17.6
Despite attempting various solutions, such as adding certain lines to the tsconfig.json, the error persists.