[英]TypeScript with Relay: Can't resolve generated module
In my MessageItem.tsx
component I have the following code:在我的
MessageItem.tsx
组件中,我有以下代码:
const data = useFragment(
graphql`
fragment MessageItem_message on Message {
date
body
}
`,
message as any
);
After running relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__
, a module named MessageItem_message.graphql.ts
gets generated.在运行
relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__
,会生成一个名为MessageItem_message.graphql.ts
的模块。
But when I run the app it gives me an error:但是当我运行该应用程序时,它给了我一个错误:
Failed to compile.
编译失败。
./src/components/MessageItem.tsx
./src/components/MessageItem.tsx
Module not found: Can't resolve './__generated__/MessageItem_message.graphql'
找不到模块:无法解析'./__generated__/MessageItem_message.graphql'
The reason is only components at the src root can refer to the right path ( ./__generated__
), whereas components in a folder actually need to refer to the path ( ../__generated__
) but it's not doing so.原因是只有 src 根目录下的组件可以引用正确的路径(
./__generated__
),而文件夹中的组件实际上需要引用路径( ../__generated__
),但事实并非如此。
How can I configure the path?如何配置路径?
Remove "--artifactDirectory ./src/__generated__" from the relay-compiler options.从中继编译器选项中删除“--artifactDirectory ./src/__generated__”。
By default it seems the Relay compiler puts a "__generated__" directory in the directory with any source code containing GraphQL.默认情况下,Relay 编译器似乎在包含 GraphQL 的任何源代码的目录中放置了一个“__generated__”目录。
As a result any "./__generated__" references anywhere and at any level in the source code hierarchy now work as they should.因此,源代码层次结构中任何位置和任何级别的任何“./__generated__”引用现在都可以正常工作。
Thanks to @ThibaultBoursier for the pointer.感谢@ThibaultBoursier 提供指针。
PS I wonder if the --artifcactDirectory option is just meant to be used to change the name of the artifact directory, rather than its location? PS 我想知道 --artifcactDirectory 选项是否仅用于更改工件目录的名称,而不是其位置?
Just moments ago I ran into the same issue.就在几分钟前,我遇到了同样的问题。 The reason is that the
relay-compiler
is using the artifactDirectory
setting to decide where to put the generated files, but the babel-plugin-relay
exposing the graphql
tag needs to get the very same argument otherwise it just attempts to include a colocated relative file.原因是
relay-compiler
使用artifactDirectory
设置来决定将生成的文件放在哪里,但是暴露graphql
标签的babel-plugin-relay
需要获得完全相同的参数,否则它只会尝试包含一个并置的相关文件.
I fixed it in my case by configuring the plugin with a babel-plugin-macros.config.js
file as follows (where the artifactDirectory
is the same as the one supplied to the relay-compiler
):在我的情况下,我通过使用
babel-plugin-macros.config.js
文件配置插件来修复它,如下所示(其中artifactDirectory
与提供给relay-compiler
):
module.exports = {
relay: {
artifactDirectory: "./src/ui/graphql/types",
},
};
This solution assumes you are using the macro via babel-plugin-macros
, otherwise you might need to supply that argument via the .babelrc
file but I have no experience with that unfortunately.此解决方案假定您通过
babel-plugin-macros
,否则您可能需要通过.babelrc
文件提供该参数,但不幸的是我没有这方面的经验。
Edit .babelrc
to point to the artifactDirectory编辑
.babelrc
以指向 artifactDirectory
// .babelrc
{
"plugins": [
[
"relay",
{
"artifactDirectory": "./src/ui/graphql/types"
}
]
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.