无法解析 Typescript 模块

Posted

技术标签:

【中文标题】无法解析 Typescript 模块【英文标题】:Can't resolve Typescript module 【发布时间】:2018-11-10 01:45:00 【问题描述】:

我有两个 Typescript 反应模块:moduleAmoduleB

我正在尝试使用moduleA 中的组件Button.tsx,方法是导出moduleB 中的Button.tsx,使用moduleA 引用该组件。

这是我正在遵循的步骤:

    moduleA 中安装和配置 webpack 和 ts-loader。 使用 moduleA 的 webpack 创建构建。 在moduleB中配置webpack和ts-loader。 使用npm install ../moduleAmoduleB 中安装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.jsonmain 属性设置为 "main.js"。使用该包时,它会尝试在根目录中查找main.js 文件。但根据您的文件夹结构,它不存在。

作为验证步骤,进入moduleBnode_modules文件夹并打开moduleA,文件夹内是否有main.js

它不应该存在,因为tsconfigoutDir 设置为"./dist"。解决方案是将moduleAmain 更改为"./dist/main.js"

【讨论】:

谢谢!这正是我的问题。

以上是关于无法解析 Typescript 模块的主要内容,如果未能解决你的问题,请参考以下文章

带有 Relay 的 TypeScript:无法解析生成的模块

Webpack 和 TypeScript:无法解析 node.d.ts 中的模块“child_process”

sequelize-typescript - 当使用带有 `tsc` 编译器(带有 NestJS)的 glob 配置时,无法解析模型模块

找不到模块:无法解析“perf_hooks”ReactJS

Visual Studio Code 中 TypeScript 文件中的绝对模块路径解析

“...解析为非模块实体并且无法使用此构造导入”是啥意思?