[英]Typescript Module not found Can't resolve
I'm building a react + typescript app in which I created a module with interfaces that are used all around my project's classes.我正在构建一个 react + typescript 应用程序,在该应用程序中,我创建了一个模块,该模块具有在我的项目类中使用的所有接口。 My IDE resolves these interfaces fine but webpack always sends the following error.
我的 IDE 可以很好地解析这些接口,但 webpack 总是发送以下错误。 I tried different things but can't get that one to go away.
我尝试了不同的方法,但无法将其带到 go 之外。
Any help would be greatly appreciated任何帮助将不胜感激
ERROR in ./assets/src/Pages/Login.tsx Module not found: Error: Can't resolve 'seeyouftp' in 'var/www/app/assets/src/Pages'
@ ./assets/src/Pages/Login.tsx 43:18-38
@ ./assets/src/Config/App.tsx
@ ./assets/entries/bundle.js
My definition file is here我的定义文件在这里
|— definitions
|— types.d.ts
|— entries
|— fonts
|— less
|— src
Excerpt of my definition file我的定义文件的摘录
declare module 'seeyouftp' {
interface User {
admin: boolean;
roles: string[];
username: string;
}
enum AuthStates {
success = 'success',
error = 'error'
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowUnreachableCode": false,
"baseUrl": "./assets",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"lib": [
"dom",
"es2019",
"esnext"
],
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"noImplicitReturns": true,
"outDir": "./dist/",
"resolveJsonModule": true,
"skipDefaultLibCheck": true,
"sourceMap": true,
"strictPropertyInitialization": false,
"strictNullChecks": true,
"target": "es5",
"typeRoots": [
"./assets/definitions/types.d.ts",
"./node_modules/@types"
],
"types": [
"node"
]
},
"include": [
"./assets/src/**/*",
"./assets/definitions/**/*"
],
"exclude": [
"node_modules"
]
}
I import the created interfaces like so:我像这样导入创建的接口:
import { Item, PlayableMedia } from 'seeyouftp';
The error message was actually very misleading, and looks like a typescript bug.该错误消息实际上非常具有误导性,看起来像 typescript 错误。 It appears that
enums
can't be exported directly, it seems necessary to use a const
to be able to export them correctly.似乎无法直接导出
enums
,似乎有必要使用const
才能正确导出它们。
So I modified my enum
declaration like so所以我像这样修改了我的
enum
声明
declare module 'seeyouftp' {
// exporting a const instead of
export const enum AuthStates {
success = 'success',
error = 'error'
}
}
Everything works now but that error message is very, very bad and time consuming现在一切正常,但是该错误消息非常非常糟糕且耗时
Try to export the declarations, and see if that makes a difference:尝试导出声明,看看是否有所不同:
declare module 'seeyouftp' {
export interface User {
admin: boolean;
roles: string[];
username: string;
}
export enum AuthStates {
success = 'success',
error = 'error'
}
You need to create seeyouftp
(I assum that seeyouftp
is your js module name) folder under /definitions
and have types.d.ts
inside /definitions/seeyouftp
like structure below您需要在
/definitions
下创建seeyouftp
(我假设seeyouftp
是您的 js 模块名称)文件夹,并在/definitions/seeyouftp
types.d.ts
有 types.d.ts ,如下面的结构
|— definitions
|—seeyouftp
|— index.d.ts
|— entries
|— fonts
|— less
|— src
And update your tsconfig
并更新您的
tsconfig
"typeRoots": [
"./assets/definitions",
"./node_modules/@types"
],
Because it is a webpack issue, you have to update your webpack config.因为它是 webpack 问题,所以您必须更新您的 webpack 配置。 Webpack needs to be told where to find the module
seeyouftp
: Webpack 需要被告知在哪里可以找到模块
seeyouftp
:
// webpack.config.js
const path = require('path');
module.exports = {
//...
resolve: {
// Add an alias
alias: {
'seeyouftp': path.resolve(__dirname, 'definitions/types.d.ts')
}
}
};
For the path to the file types.d.ts
I assumed your webpack configuration is located next to the definitions
folder.对于文件
types.d.ts
的路径,我假设您的 webpack 配置位于definitions
文件夹旁边。
Here is the associated webpack documentation. 这是相关的 webpack 文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.