typescript tsc 抛出“TS2307:无法找到本地文件的模块”
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/37548734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
tsc throws `TS2307: Cannot find module` for a local file
提问by Daniel Perez Alvarez
I've got a simple example project using TypeScript: https://github.com/unindented/ts-webpack-example
我有一个使用 TypeScript 的简单示例项目:https: //github.com/unindented/ts-webpack-example
Running tsc -p .
(with tsc
version 1.8.10) throws the following:
运行tsc -p .
(使用tsc
版本 1.8.10)会抛出以下内容:
app/index.ts(1,21): error TS2307: Cannot find module 'components/counter'.
components/button/index.ts(2,22): error TS2307: Cannot find module 'shared/backbone_base_view'.
components/button/index.ts(3,25): error TS2307: Cannot find module 'shared/backbone_with_default_render'.
components/counter/index.ts(2,22): error TS2307: Cannot find module 'shared/backbone_base_view'.
components/counter/index.ts(3,25): error TS2307: Cannot find module 'shared/backbone_with_default_render'.
components/counter/index.ts(4,27): error TS2307: Cannot find module 'shared/backbone_with_subviews'.
components/counter/index.ts(5,20): error TS2307: Cannot find module 'components/button'.
It complains about all imports of local files, like the following:
它抱怨所有本地文件的导入,如下所示:
import Counter from 'components/counter';
If I change it to a relative path it works, but I don't want to, as it makes my life more difficult when moving files around:
如果我将其更改为相对路径,它会起作用,但我不想这样做,因为它在移动文件时使我的生活变得更加困难:
import Counter from '../components/counter';
The vscode
codebase does not use relative paths, but everything works fine for them, so I must be missing something in my project: https://github.com/Microsoft/vscode/blob/0e81224179fbb8f6fda18ca7362d8500a263cfef/src/vs/languages/typescript/common/typescript.ts#L7-L14
该vscode
代码库不使用相对路径,但一切工作正常他们,所以我必须失去在我的项目的东西:https://github.com/Microsoft/vscode/blob/0e81224179fbb8f6fda18ca7362d8500a263cfef/src/vs/languages/typescript/common /typescript.ts#L7-L14
You can check out my GitHub repo, but in case it helps here's the tsconfig.json
file I'm using:
您可以查看我的 GitHub 存储库,但如果它有帮助,这里是tsconfig.json
我正在使用的文件:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noImplicitAny": false,
"removeComments": false,
"preserveConstEnums": true,
"sourceMap": true,
"outDir": "dist"
},
"exclude": [
"dist",
"node_modules"
]
}
Funny thing is, building the project through webpack
using ts-loader
works fine, so I'm guessing it's just a configuration issue...
有趣的是,通过webpack
using构建项目ts-loader
工作正常,所以我猜这只是一个配置问题......
回答by Daniel Perez Alvarez
@vladima replied to this issue on GitHub:
@vladima在 GitHub 上回复了这个问题:
The way how compiler resolves modules is controlled by moduleResolution option that can be either
node
orclassic
(more details and differences can be found here). If this setting is omitted the compiler treats this setting to benode
if module iscommonjs
andclassic
- otherwise. In your case if you wantclassic
module resolution strategy to be used withcommonjs
modules - you need to set it explicitly by using{ "compilerOptions": { "moduleResolution": "node" } }
编译器解析模块的方式由 moduleResolution 选项控制,该选项可以是
node
或classic
(更多详细信息和差异可以在这里找到)。如果省略此设置,编译器将此设置视为node
模块是否为commonjs
和classic
- 否则。在您的情况下,如果您希望classic
模块解析策略与commonjs
模块一起使用- 您需要使用{ "compilerOptions": { "moduleResolution": "node" } }
回答by sef
In VS2019, the projectproperty page, TypeScript Buildtab has a setting (dropdown) for "Module System". When I changed that from "ES2015" to CommonJS, then VS2019 IDE stopped complaining that it could find neither axios nor redux-thunk (TS2307).
在 VS2019 中,项目属性页,TypeScript Build选项卡有一个“模块系统”的设置(下拉)。当我将其从 "ES2015" 更改为CommonJS 时,VS2019 IDE 不再抱怨它既找不到 axios 也找不到 redux-thunk (TS2307)。
tsconfig.json:
tsconfig.json:
{
"compilerOptions": {
"allowJs": true,
"baseUrl": "src",
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"lib": [
"es6",
"dom",
"es2015.promise"
],
"module": "esnext",
"moduleResolution": "node",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"outDir": "build/dist",
"rootDir": "src",
"sourceMap": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"target": "es5",
"skipLibCheck": true,
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"exclude": [
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts",
"node_modules",
"obj",
"**/*.spec.ts"
],
"include": [
"src",
"src/**/*.ts",
"@types/**/*.d.ts",
"node_modules/axios",
"node_modules/redux-thunk"
]
}
回答by basarat
The vscode codebase does not use relative paths, but everything works fine for them
vscode 代码库不使用相对路径,但对它们来说一切正常
Really depends on your module loader. If you are using systemjs
with baseurl
then it would work. VSCode uses its own custom module loader (based on an old version of requirejs).
真的取决于你的模块加载器。如果您使用systemjs
withbaseurl
那么它会起作用。VSCode 使用自己的自定义模块加载器(基于旧版本的 requirejs)。
Recommendation
推荐
Use relative paths as that is what commonjs
supports. If you move files around you will get a typescript compile time error (a good thing) so you will be better off than a great majority of pure js projects out there (on npm).
使用相对路径,因为这是commonjs
支持的。如果你四处移动文件,你会得到一个打字稿编译时错误(一件好事),所以你会比那里的绝大多数纯 js 项目(在 npm 上)更好。
回答by DigaoParceiro
I was in trouble to import an Enum in typescript
我在打字稿中导入 Enum 时遇到了麻烦
error TS2307: Cannot find module...
错误 TS2307:找不到模块...
What I did to make it work was migrate the enum to another file and make this change:
我所做的工作是将枚举迁移到另一个文件并进行此更改:
export enum MyEnum{
VALUE = "MY_VALUE"
}
to
到
export enum MyEnum{
VALUE = 1
}
回答by Feng Zhang
If use webstorm, press Ctrl+Alt+S and bring up the settings window. Languages&Frameworks>TypeScript, enable "use tsconfig.json" option.
如果使用 webstorm,请按 Ctrl+Alt+S 并调出设置窗口。Languages&Frameworks>TypeScript,启用“use tsconfig.json”选项。
回答by mahendra maid
In my case ,
就我而言,
//app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
//{
// HotModuleReplacement = true
//});
i commented it in startup.cs
我在startup.cs中评论了它