时间戳

首页 > 解决方案 > 导入打字稿时未找到此相关模块

typescript - 导入打字稿时未找到此相关模块

问题描述

先发制人： Stackoverflow 上有大量“未找到相关模块”问题。我已经浏览了尽可能多的东西，它们不是重复的。请不要将此标记为重复。

我有一个vue create使用 Babel 和 Typescript 的 Vue 项目，然后我使用以下命令生成了一些 gRPC-Web / Protobuf 代码：

cd src
protoc -I=../../protos ../../protos/foo.proto --js_out=import_style=typescript:. --grpc-web_out=import_style=typescript,mode=grpcweb:.

这在目录中生成了这些文件src：

但是，当我npm run serve或npm run build我收到此错误时：

This relative module was not found:

* ./foo_pb in ./src/main.ts, ./src/FooServiceClientPb.ts

在两者中main.ts，FooServiceClientPb.ts它都会这样做：

import {Empty, Memory} from './foo_pb';

我可以 ctrl-click./foo_pb并且它可以foo_pb.d.ts正确打开，所以 VSCode 至少知道如何打开该文件。并且所有文件都在同一个目录中！为什么构建系统找不到它？

我已经尝试过标准删除node_modules，请律师，去健身房。也npm-check-updates -u。没有任何效果。

编辑 1

通过在生成错误的位中添加 a ，我得到了进一步的console.log()信息（显然 Vue 不输出实际错误，是的）。我懂了：

resolve './foo_pb' in '/home/me/myproject/src'
  using description file: /home/me/myproject/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/me/myproject/package.json (relative path: ./src/foo_pb)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/me/myproject/src/foo_pb doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/me/myproject/src/foo_pb.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/me/myproject/src/foo_pb.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/me/myproject/src/foo_pb.jsx doesn't exist
      .vue
        Field 'browser' doesn't contain a valid alias configuration
        /home/me/myproject/src/foo_pb.vue doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/me/myproject/src/foo_pb.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/me/myproject/src/foo_pb.wasm doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /home/me/myproject/src/foo_pb.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/me/myproject/src/foo_pb.tsx doesn't exist
      as directory
        /home/me/myproject/src/foo_pb doesn't exist

如果您运行vue ui并检查Inspect任务（已解析的 webpack 配置），您会看到：

  resolve: {
    extensions: [
      '.mjs',
      '.js',
      '.jsx',
      '.vue',
      '.json',
      '.wasm',
      '.ts',
      '.tsx'
    ],
    ...

请注意，它缺少.d.ts. 所以我尝试通过创建一个vue.config.js包含以下内容的文件来添加它：

module.exports = {
  configureWebpack: {
    resolve: {
      extensions: [
        ".d.ts"
      ]
    }
  }
}

但是，这也不起作用：

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                 12:36:53

 error  in ./src/foo_pb.d.ts

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Debug Failure. Output generation failed
    at PoolWorker.fromErrorObj (/home/me/myproject/node_modules/thread-loader/dist/WorkerPool.js:262:12)
    at /home/me/myproject/node_modules/thread-loader/dist/WorkerPool.js:204:29
    at Object.transpileModule (/home/me/myproject/node_modules/typescript/lib/typescript.js:112341:29)
    at getTranspilationEmit (/home/me/myproject/node_modules/ts-loader/dist/index.js:283:74)
    at successLoader (/home/me/myproject/node_modules/ts-loader/dist/index.js:66:15)
    at Object.loader (/home/me/myproject/node_modules/ts-loader/dist/index.js:22:12)

标签： typescriptvue.js

解决方案

好的，我认为这只是protoc. 我是这样运行的：

protoc -I=../../protos/ ../../protos/foo.proto --js_out=import_style=typescript:. --grpc-web_out=import_style=typescript,mode=grpcweb:.

这创造了foo_pb.d.ts，但它也应该创造foo_pb.js。事实上，它为每条消息创建单独的文件 -memory.js和empty.js. 我通过运行以下命令“修复”了它：

protoc -I=../../protos/ ../../protos/foo.proto --js_out=import_style=commonjs,binary:. --grpc-web_out=import_style=typescript,mode=grpcweb:.

这然后生成了foo_pb.js文件，它也生成了foo_pb.d.ts文件。我知道对，WTF？

推荐阅读