[英]Can't resolve Typescript module
I have two Typescript react modules: moduleA
and moduleB
.我有两个 Typescript 反应模块:
moduleA
和moduleB
。
I am trying to use a component Button.tsx
from moduleA
by exporting the Button.tsx
in moduleB
referring to this component using moduleA
.我试图用一个部件
Button.tsx
从moduleA
通过导出Button.tsx
在moduleB
使用参照本组件moduleA
。
Here's the steps I am following :这是我遵循的步骤:
moduleA
.moduleA
安装和配置 webpack 和 ts-loader。moduleA
.moduleA
创建构建。moduleB
.moduleB
。moduleA
in moduleB
using npm install ../moduleA
.moduleA
在moduleB
使用npm install ../moduleA
。 Then, I am referring the Button
component in moduleB
, from moduleA
using:然后,我指的是
moduleB
的Button
组件,从moduleA
使用:
import { Button } from "moduleA";
I am getting this error :我收到此错误:
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'
Here's my package.json
of moduleA
:这是我的
moduleA
的package.json
:
{
"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"
}
}
and package.json of moduleB
.和
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"
]
}
folder structure:文件夹结构:
├── dist
├── node_modules
├── src
├── package.json
├── webpack.config.js
├── tsconfig.json
Is there any other way to do it?有没有其他方法可以做到?
This is because the package that is being used as a dependency is broken.这是因为用作依赖项的包已损坏。
moduleA
looks for the button in the wrong place. moduleA
在错误的位置寻找按钮。 The package.json
has the main
property set to "main.js"
. package.json
的main
属性设置为"main.js"
。 When the package is used, it tries to find the main.js
file in the root directory.使用该包时,它会尝试在根目录中查找
main.js
文件。 But according to your folder structure it does not exist.但是根据您的文件夹结构,它不存在。
As a verification step, go to moduleB
's node_modules
folder and open moduleA
, is there a main.js
inside the folder?作为验证步骤,转到
moduleB
的node_modules
文件夹并打开moduleA
,文件夹中是否有main.js
?
It shouldn't exist because tsconfig
has outDir
set to "./dist"
.它不应该存在,因为
tsconfig
已将outDir
设置为"./dist"
。 The solution would be to change moduleA
's main
to "./dist/main.js"
解决方案是将
moduleA
的main
更改为"./dist/main.js"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.