Typescript cannot find module vue

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

egoist / poi Public archive

TypeScript plugin can’t find App.vue module #261

TypeScript plugin can’t find App.vue module #261

Comments

Do you want to request a feature or report a bug?
This is a bug report

What is the current behavior?

(2,17): error TS2307: Cannot find module './App.vue'. 

If the current behavior is a bug, please provide the steps to reproduce.
index.ts

import * as Vue from 'vue' import App from './App.vue' new Vue( < el: '#app', render: h =>h(App) >) 

tsconfig.json (copied over from official Vuejs documentation)

Will yield the following error:

(2,17): error TS2307: Cannot find module './App.vue'. FAIL Compiled with errors! 

What is the expected behavior?
I would expect the App component to be found and used in the render method

If this is a feature request, what is the motivation or use case for changing the behavior?
No it is a bug report

Please mention other relevant information such as the browser version, Node.js version, Poi version and Operating System.
Linux, Node 8, poi 9.4.3

The text was updated successfully, but these errors were encountered:

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript: IDE reports TS2307: Cannot find module error for Vue components imports #1198

Typescript: IDE reports TS2307: Cannot find module error for Vue components imports #1198

Comments

Version

Reproduction link

Steps to reproduce

• Install Vue with vue-cli,
• Choose Typescript support
• Open any file that imports *.vue files

What is expected?

What is actually happening?

IDE reports TS2307: Cannot find module error for Vue components imports. Imports are higlighted in red.

I’ve already reported this error here: vuejs/vue-class-component#219 because I thought that it is a vue-class-component issue, but it’s not. It’s a configuration issue.

Putting the following vue-shim.d.ts declaration file under my ./src directory solves the problem:

declare module "*.vue"  import Vue from "vue"; export default Vue; >

The text was updated successfully, but these errors were encountered:

This is weird because the build actually works fine, it’s only the IDEs complaining.

/cc @ktsn @HerringtonDarkholme any idea why importing Vue at the root level in shims.d.ts breaks the *.vue imports?

the build actually works fine

ts-loader has special handling for Vue file which doesn’t affect IDE.

The workaround is to split declare module and declare global into two separate files.

The first declare module is called ambient module, which is used to describe modules written in JavaScript.
The second declare global is called (external) module, which is a TypeScript specific module system designed before ES-module. Global types like Array and JSX.Element resides in this module type.

And finally it seems that TS cannot mix up two modules, sadly. The compiler thinks one file has one single module type. So the error occurs.

Thanks for the explanation. I knew that creating a separate file solves the problem (I found it by accident) but I didn’t have the slightest idea why it helps.

Источник

VueJS/Typescript — Cannot find module ‘./components/Navigation’ or its corresponding type declarations

The «correct» solution here is to figure out why isn’t telling TypeScript the type for *.vue files (which is why you’re getting the «Cannot find module [. ] or its corresponding type declarations » error Another thing is — this is not a real solution but a temporary fix: Another thing you could try is importing Kaki with a relative path (so without the ~ alias)? Solution: This is the way that I declare in my and it works for me: For more information you can check Nuxt TypeScript Question: Jest Configuration: My test file (.ts file) : Here’s my directory structure: When I run the test, it says I think it has something to do with Solution: Can you check if it works if you change your to a file?

VueJS/Typescript — Cannot find module ‘./components/Navigation’ or its corresponding type declarations

When I create a script as typescript (lang=»ts») I get an error stating

I realized that this only happens when I set the lang as ts, which is what I need to build my Vue application.

  export default 

In the src folder add the file shims-vue.d.ts with the following content :

declare module '*.vue' < import type < DefineComponent >from 'vue' const component: DefineComponent, <>, any> export default component > 

and import the component with its extension .vue :

 import Navigation from './components/Navigation.vue'; 

import Navigation from './components/Navigation'; 

Could not find a declaration file for module ‘vue-xxx’, If @types/vue-treeselect does not exist then you can manually declare the module using ambient definitions.. Create a .d.ts somewhere in your project (warning: it should not use import or export) and define your module.If you don’t want to type-check it (makes everything imported to be infered as any) : . …

TS2307: Cannot find module ‘@/components/helper/utils/SimpleUtil.vue’ or its corresponding type declarations

I work on Nuxt.js (Vue.js) project that uses TypeScript in VSCode. When importing components I’d like to cut off long paths to them. For example:

 import SimpleUtil from '../../../components/helper/utils/SimpleUtil.vue' 

 import SimpleUtil from '@/components/helper/utils/SimpleUtil.vue' 

 import SimpleUtil from 'components/helper/utils/SimpleUtil.vue' 

 import SimpleUtil from '@/components/helper/utils/SimpleUtil.vue' 

The tsconfig.json file looks as following:

< "compilerOptions": < "target": "ES2018", "module": "ES6", "moduleResolution": "Node", "lib": [ "ESNext", "ESNext.AsyncIterable", "DOM" ], "esModuleInterop": true, "allowJs": true, "sourceMap": true, "strict": true, "noEmit": true, "experimentalDecorators": true, "baseUrl": "./src", "noImplicitAny": true, "noImplicitThis": true, "noImplicitReturns": true, "types": [ "@types/node", "@nuxt/types" ], "resolveJsonModule": true >, "paths": < "~/*": [ "src/*" ], "@/*": [ "src/*" ] >, "include": [ "src/**/*.ts", "src/**/*.vue" ], "exclude": [ "src/node_modules", "./node_modules", ".nuxt", "dist" ] > 

The nuxt.config.js file looks as following:

export default < // Global page headers (https://go.nuxtjs.dev/config-head) head: < title: 'Licota', meta: [ < charset: 'utf-8' >, < name: 'viewport', content: 'width=device-width, initial-scale=1' >, < hid: 'description', name: 'description', content: '' >, ], link: [< rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' >], >, // Global CSS (https://go.nuxtjs.dev/config-css) css: ['~/assets/css/main.sass'], // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins) plugins: [], // Auto import components (https://go.nuxtjs.dev/config-components) components: true, // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules) buildModules: [ // https://go.nuxtjs.dev/typescript '@nuxt/typescript-build', // https://go.nuxtjs.dev/stylelint '@nuxtjs/stylelint-module', ], // Modules (https://go.nuxtjs.dev/config-modules) modules: [ // https://go.nuxtjs.dev/axios '@nuxtjs/axios', 'bootstrap-vue/nuxt', ], // Axios module configuration (https://go.nuxtjs.dev/config-axios) axios: <>, // Build Configuration (https://go.nuxtjs.dev/config-build) build: < extractCSS: true, >, srcDir: 'src/', vue: < config: < productionTip: false, devtools: true >> > 

This is the way that I declare paths in my jsconfig.json and it works for me:

For more information you can check Nuxt TypeScript

VueJS/Typescript — Cannot find module, VueJS/Typescript error: Cannot find module ‘my-module’ or its corresponding type declarations 3 Could not export vue-router: warning in ./src/router/index.js «export ‘default’ (imported as ‘VueRouter’) was …

Jest cannot find module Vue/Vite

/** @type */ module.exports = < preset: 'ts-jest', moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'vue'], moduleNameMapper: < '^~/(.*)$': '/src/$1', >, testEnvironment: 'jsdom', testMatch: ['**/tests/unit/**/*.[jt]s?(x)'], transform: < '^.+\\.vue$': 'vue-jest', '^.+\\.ts$': 'ts-jest', >, > 

import < render >from '@testing-library/vue' import Kaki from '~/components/Kaki.vue' test('Kaki.vue', () => < const < getByText >= render(Kaki) getByText('Tono') >) 

Here’s my directory structure:

When I run the test, it says Cannot find module ‘~/components/Kaki.vue’ or its corresponding type declarations.

I think it has something to do with moduleNameMapper

Can you check if it works if you change your Index.spec.ts to a .js file? The error you’re getting is because TypeScript doesn’t know what type should .vue files have.

In a new Vue CLI project, the error you’re getting is prevented with the shims.d.ts which tells TS to treat *.vue files as if their default export had the Vue type.

The «correct» solution here is to figure out why isn’t shims.d.ts telling TypeScript the type for *.vue files (which is why you’re getting the «Cannot find module [. ] or its corresponding type declarations » error

Another thing is — this is not a real solution but a temporary fix:

// @ts-ignore import Kaki from '~/components/Kaki.vue' 

Another thing you could try is importing Kaki with a relative path (so without the ~ alias)? The ~ alias may be broken in some way — are you sure the alias is correctly defined in your tsconfig.json ?

Vue.js — Cannot find module ‘pinia’ or its corresponding, On the right hand side of your InteliJ IDE you’ll see a Typescript x.y.z. Click on it and select Restart TypeScript Service. If that doesn’t fix it (it does in 90% of cases), File > Repair IDE and follow instructions. If you don’t have a Repair IDE option in File menu (maybe upgrade it?), go with Invalidate caches.

Could not find a declaration file for module ‘vue-xxx’

Any 3rd party Vue.js library that I try to add to my project, throws the following error:

Could not find a declaration file for module 'vue-xxx' 

I have tried ‘vue-treeselect’, ‘vue-select’ , ‘vue-multiselect’ with more or less the same result (* those libraries don’t allow import Modulename from , but need const Modulename = require ).

I add those under «dependencies»: < in package.json .

I am using the SPA template for Vue.js provided by dotnet core.

Full example with ‘tree-select’:

import Treeselect from 'vue-treeselect'; /* . */ value = null; source = [ < id: 'node-1', label: 'Node 1', children: [ < id: 'node-1-a', label: 'Node 1-A', >] >, < id: 'node-2', label: 'Node 2', >]; /* . */ 

in [at-loader] ./ClientApp/components/mycomponent/mycomponent.ts:10:24 TS7016: Could not find a declaration file for module 'vue-treeselect'. 'path/to/project/node_modules/vue-treeselect/dist/vue-treeselect.js' implicitly has an 'any' type. 

This error occured because of vue-xxxxxx has been generated in JavaScript.

Method 1: To avoid the issue I just replace it by the standard require() :

const vue-xxxxxx = require('vue-xxxxxx'); // import < vue-xxxxxx >from 'vue-xxxxxx' 

Method 2: To avoid the issue I just replace these line in the tsconfig.json
«noImplicitAny»: false,
«allowJs»: true,

Now you can use import statement as follows:

If @types/vue-treeselect does not exist then you can manually declare the module using ambient definitions.

Create a .d.ts somewhere in your project (warning: it should not use import or export ) and define your module. If you don’t want to type-check it (makes everything imported to be infered as any ) :

declare module 'vue-treeselect' 

If you want to type-check it :

declare module 'vue-treeselect'

Because any of given solutions haven’t helped me per se, I had to create a dedicated vendor.d.ts ( shims-vue.d.ts did not work) file in my project root folder, and then put there following line:

declare module 'my-module-name-here'; 

It turns out the question was wrong, since I wanted to use ‘@riophae/vue-treeselect’ but I was targeting ‘vue-treeselect’ instead.

But this was just one part of the problem, it is still not trivial (at least for me) to import 3rd party npm components into a Vue.js typescript project.

Quick & dirty solution (when one does not care about the type and just wants to import the library)

1. Change tsconfig.json (the Typescript configuration of your project) to allow import Treeselect from ‘@riophae/vue-treeselect’; : «noImplicitAny»: false

(without this step you get an error that states: TS7016: Could not find a declaration file for module ‘@riophae/vue-treeselect’. ‘path/to/project/node_modules/@riophae/vue-treeselect/dist/vue-treeselect.min.js’ implicitly has an ‘any’ type. )

1. Import module and register as ‘treeselect’: import Treeselect from ‘@riophae/vue-treeselect’; Vue.component(‘treeselect’, Treeselect);

(without this step you get an error that states: Unknown custom element: — did you register the component correctly? For recursive components, make sure to provide the «name» option. )

If you want to do things properly, I highly recommend this article:

«Write a declaration file for a third-party NPM module»

Vue.js — Jest cannot find module Vue/Vite, When I run the test, it says Cannot find module ‘~/components/Kaki.vue’ or its corresponding type declarations. I think it has something to do with moduleNameMapper vue.js jestjs

Источник