导入打字稿时未找到此相关模块 [英] This relative module was not found, when importing typescript

问题描述

预先注意: Stackoverflow 上有大量未找到相关模块"的问题.我已经尽可能多地浏览了，它们不是重复的.请不要将此标记为重复.

Preemptive note: There are a ton of "relative module was not found" questions on Stackoverflow. I have looked through as many as I could find and they are not duplicates. Please don't mark this as a duplicate.

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

I have a Vue project set up with vue create that uses Babel and Typescript, I then generated some gRPC-Web / Protobuf code with this command:

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

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

This generated these files in the src directory:

• foo_pb.d.ts(Protobuf 消息的 Typescript 定义)
• empty.js、memory.js(Protobuf 消息)
• FooServiceClientPb.ts(gRPC-web 代码)

• foo_pb.d.ts (the Typescript definitions for the Protobuf messages)
• empty.js, memory.js (the Protobuf messages)
• FooServiceClientPb.ts (the gRPC-web code)

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

However when I npm run serve or npm run build I get this error:

This relative module was not found:

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

在 main.ts 和 FooServiceClientPb.ts 中，它都这样做:

In both main.ts and FooServiceClientPb.ts it does this:

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

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

I can ctrl-click ./foo_pb and it opens foo_pb.d.ts correctly, so VSCode at least knows how to open that file. And all the files are in the same directory! Why can't the build system find it?

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

I've tried the standard delete node_modules, get a lawyer, hit the gym. Also npm-check-updates -u. Nothing works.

我通过在生成错误的位中添加一个 console.log() 来进一步了解(显然 Vue 不输出实际错误，是的).我明白了:

I got a bit further by adding a console.log() in the bit where the error is generated (apparently Vue doesn't output the actual error, yeay). I got this:

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 配置)，您会看到:

If you run vue ui and check out the Inspect task (the resolved webpack config) you see:

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

注意它缺少.d.ts.所以我尝试添加它，通过使用以下内容创建一个文件 vue.config.js:

Note that it is missing .d.ts. So I tried adding it, by creating a file vue.config.js with this content:

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)

推荐答案

好吧，我认为这只是 protoc 中的一个错误.我是这样运行的:

Ok I think this is just a bug in protoc. I was running it like this:

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.我通过运行以下命令修复"了它:

That creates foo_pb.d.ts but it should create foo_pb.js too. In fact it creates separate files for each message - memory.js and empty.js. I "fixed" it by running this command:

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?

This then generated the foo_pb.js file, and it also generates the foo_pb.d.ts file. I know right, WTF?

这篇关于导入打字稿时未找到此相关模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！