导入打字稿时找不到此相对模块

Question

优先注意事项： Stackoverflow上有很多“找不到相对模块”的问题。我已经浏览了尽可能多的内容，它们不是重复的。请不要将其标记为重复项。

我有一个使用Babel和Typescript的vue create设置的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目录中生成这些文件：

• foo_pb.d.ts（Protobuf消息的打字稿定义）
• [empty.js，memory.js（Protobuf消息）
• [FooServiceClientPb.ts（gRPC网络代码）

但是，当我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键单击./foo_pb，它会正确打开foo_pb.d.ts，因此VSCode至少知道如何打开该文件。而且所有文件都在同一目录中！为什么构建系统找不到它？

我尝试了标准删除node_modules，请了律师，上了体育馆。也是npm-check-updates -u。无效。

编辑1

我通过在生成错误的位添加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)

Answer 1

确定，思考这只是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？