【发布时间】：2020-01-31 13:18:57
【问题描述】：
抢先说明： 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 消息的 Typescript 定义） -
empty.js、memory.js（Protobuf 消息） -
FooServiceClientPb.ts（gRPC-web 代码）
但是，当我 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
通过在生成错误的位中添加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)
【问题讨论】：
标签： typescript vue.js