无法解析 Typescript 模块
Posted
技术标签:
【中文标题】无法解析 Typescript 模块【英文标题】:Can't resolve Typescript module 【发布时间】:2018-11-10 01:45:00 【问题描述】:我有两个 Typescript 反应模块:moduleA
和 moduleB
。
我正在尝试使用moduleA
中的组件Button.tsx
,方法是导出moduleB
中的Button.tsx
,使用moduleA
引用该组件。
这是我正在遵循的步骤:
-
在
moduleA
中安装和配置 webpack 和 ts-loader。
使用 moduleA
的 webpack 创建构建。
在moduleB
中配置webpack和ts-loader。
使用npm install ../moduleA
在moduleB
中安装moduleA
。
然后,我指的是moduleB
中的Button
组件,来自moduleA
,使用:
import Button from "moduleA";
我收到此错误:
ERROR in C:\Users\VaibhavPC\Projects\moduleb\src\Start.tsx
./src/Start.tsx
[tsl] ERROR in C:\Users\VaibhavPC\Projects\moduleb\src\Start.tsx(2,24)
TS2307: Cannot find module './moduleA'
这是我的package.json
moduleA
:
"name": "moduleA",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts":
"start": "react-scripts start",
"build": "rm ./lib/* && tsc",
"magic": "webpack --config webpack.config.js",
"prepublish": "npm run build",
"test": "./test.sh"
,
"author": "",
"license": "ISC",
"devDependencies":
"@types/chai": "^3.4.35",
"@types/enzyme": "^2.7.6",
"@types/mocha": "^2.2.40",
"@types/react": "^15.0.18",
"@types/react-dom": "^0.14.23",
"@types/sinon": "^1.16.36",
"chai": "^3.5.0",
"enzyme": "^2.8.0",
"jsdom": "^9.12.0",
"mocha": "^3.2.0",
"react": "^15.4.2",
"react-addons-test-utils": "^15.4.2",
"react-dom": "^15.4.2",
"sinon": "^2.1.0",
"webpack-cli": "^2.1.4",
"ts-loader": "^4.3.0",
"webpack": "^4.10.1"
,
"files": [
"lib",
"LICENSE",
"main.js"
],
"types": "./lib/Button.d.ts",
"dependencies":
"typescript": "^2.8.3"
和moduleB
的package.json。
"name": "tmp",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts":
"start": "react-scripts start",
"build": "rm ./lib/* && tsc",
"magic": "webpack --config webpack.config.js",
"prepublish": "npm run build",
"test": "./test.sh"
,
"author": "",
"license": "ISC",
"devDependencies":
"@types/chai": "^3.4.35",
"@types/enzyme": "^2.7.6",
"@types/mocha": "^2.2.40",
"@types/react": "^15.0.18",
"@types/react-dom": "^0.14.23",
"@types/sinon": "^1.16.36",
"chai": "^3.5.0",
"enzyme": "^2.8.0",
"jsdom": "^9.12.0",
"mocha": "^3.2.0",
"react": "^15.4.2",
"react-addons-test-utils": "^15.4.2",
"react-dom": "^15.4.2",
"sinon": "^2.1.0",
"webpack-cli": "^2.1.4",
"ts-loader": "^4.3.0",
"webpack": "^4.10.1",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-3": "^6.17.0",
"css-loader": "^0.27.3",
"json-loader": "^0.5.4",
"sass-loader": "^6.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"extract-text-webpack-plugin": "^2.0.0-beta.4"
,
"files": [
"lib",
"LICENSE",
"main.js"
],
"types": "./lib/hello.d.ts",
"dependencies":
"modulea": "file:../modulea",
"react-scripts": "1.1.4",
"typescript": "^2.8.3"
tsconfig.json
"compilerOptions":
"outDir": "./dist",
"target": "es5",
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"declaration": true,
"sourceMap": true,
"jsx": "react"
,
"include": [
"./src/**/*.tsx",
"./src/**/*.ts"
],
"exclude": [
"node_modules"
]
文件夹结构:
├── dist
├── node_modules
├── src
├── package.json
├── webpack.config.js
├── tsconfig.json
还有其他方法吗?
【问题讨论】:
为什么不使用import Button from '../modulea'
而不是本地npm包?
另一个修复是使用npm link
。见***.com/a/14387210/3415716
@LeoCaseiro 尝试 'import Button from '../modulea' 不起作用。
能否请您发布您的tsconfig.json
和文件夹结构?
@LeoCaseiro 已编辑。还有 npm link ,同样的问题“无法解析模块”。
【参考方案1】:
这是因为被用作依赖的包被破坏了。
moduleA
在错误的位置寻找按钮。 package.json
的 main
属性设置为 "main.js"
。使用该包时,它会尝试在根目录中查找main.js
文件。但根据您的文件夹结构,它不存在。
作为验证步骤,进入moduleB
的node_modules
文件夹并打开moduleA
,文件夹内是否有main.js
?
它不应该存在,因为tsconfig
将outDir
设置为"./dist"
。解决方案是将moduleA
的main
更改为"./dist/main.js"
【讨论】:
谢谢!这正是我的问题。以上是关于无法解析 Typescript 模块的主要内容,如果未能解决你的问题,请参考以下文章
带有 Relay 的 TypeScript:无法解析生成的模块
Webpack 和 TypeScript:无法解析 node.d.ts 中的模块“child_process”
sequelize-typescript - 当使用带有 `tsc` 编译器(带有 NestJS)的 glob 配置时,无法解析模型模块