Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Webpack error querying mdx.html in GraphiQL #35771

Closed
2 tasks done
notexactlyawe opened this issue May 29, 2022 · 9 comments
Closed
2 tasks done

Webpack error querying mdx.html in GraphiQL #35771

notexactlyawe opened this issue May 29, 2022 · 9 comments
Labels
good first issue Issue that doesn't require previous experience with Gatsby status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. topic: remark/mdx Related to Markdown, remark & MDX ecosystem type: documentation An issue or pull request for improving or updating Gatsby's documentation

Comments

@notexactlyawe
Copy link

Preliminary Checks

Description

Trying to query the field mdx.html from GraphiQL loads forever on the web interface and gives an error in the console running gatsby develop.

Query:

query MyQuery {
  mdx {
    html
  }
}

Console error:

 ERROR

Error: Conflict: Multiple chunks emit assets to the same filename output.js (chunks main and framework)
    at C:\Users\cmacl\src\mdx-bug-repro\node_modules\webpack\lib\Compilation.js:4610:12
    at C:\Users\cmacl\src\mdx-bug-repro\node_modules\webpack\lib\Cache.js:91:34
    at Array.<anonymous> (C:\Users\cmacl\src\mdx-bug-repro\node_modules\webpack\lib\cache\MemoryWithGcCachePlugin.js:116:13)
    at C:\Users\cmacl\src\mdx-bug-repro\node_modules\webpack\lib\Cache.js:91:19
    at eval (eval at create (C:\Users\cmacl\src\mdx-bug-repro\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Despite the environment below, this occurred in Firefox 100.0

Reproduction Link

https://github.com/notexactlyawe/mdx-bug-repro

Steps to Reproduce

  1. Run gatsby develop
  2. Visit http://localhost:8000/___graphq
  3. Paste the query in the description into the interface
  4. Click the play button
  5. Observe the error

Expected Result

A GraphQL response for the query would be given.

Actual Result

GraphiQL shows a loading spinner and the gatsby develop output shows an error.

Environment

System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.10.4
  Browsers:
    Chrome: 101.0.4951.67
    Edge: Spartan (44.22000.120.0), Chromium (101.0.1210.53)
  npmPackages:
    gatsby: ^4.16.0-next.0 => 4.16.0-next.0 
    gatsby-plugin-mdx: ^3.15.0 => 3.15.0 
    gatsby-source-filesystem: ^4.15.0 => 4.15.0 
  npmGlobalPackages:
    gatsby-cli: 4.15.0

Config Flags

No response
@notexactlyawe notexactlyawe added the type: bug An issue or pull request relating to a bug in Gatsby label May 29, 2022
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label May 29, 2022
@tyhopp tyhopp added status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. topic: GraphQL Related to Gatsby's GraphQL layer topic: remark/mdx Related to Markdown, remark & MDX ecosystem topic: plugins Related to plugin system, themes & catch-all for plugins that don't have a label and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels May 30, 2022
@LekoArts LekoArts added type: documentation An issue or pull request for improving or updating Gatsby's documentation good first issue Issue that doesn't require previous experience with Gatsby and removed topic: GraphQL Related to Gatsby's GraphQL layer topic: plugins Related to plugin system, themes & catch-all for plugins that don't have a label labels May 30, 2022
@LekoArts
Copy link
Contributor

Hi!

The html field doesn't work in gatsby develop, it's only accessible during gatsby build so that you can use it for e.g. the gatsby-plugin-feed.

One could add this limitation to this section: https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#troubleshooting

@LekoArts LekoArts removed the type: bug An issue or pull request relating to a bug in Gatsby label May 30, 2022
@notexactlyawe
Copy link
Author

Thanks for the quick response! I'd be happy to help change the docs.

Could you help me what the html field contains and the reason that we can't access it during gatsby develop? I'm wondering whether there's anything we can do to improve the error message in case a user doesn't think to look at the troubleshooting section.

@LekoArts
Copy link
Contributor

I'm not 100% sure why that limitation exists and if we can warn against it, this is a bit before my time but I can check if I can get more infos on this.

It's defined here:

gatsby/packages/gatsby-plugin-mdx/gatsby/create-schema-customization.js

Lines 219 to 243 in 160bbf0

html: {
type: `String`,
async resolve(mdxNode) {
if (mdxNode.html) {
return Promise.resolve(mdxNode.html)
}
const { body } = await processMDX({ node: mdxNode })
try {
if (!mdxHTMLLoader) {
mdxHTMLLoader = loader({ reporter, cache, store })
}
const html = await mdxHTMLLoader.load({ ...mdxNode, body })
return html
} catch (e) {
reporter.error(
`gatsby-plugin-mdx: Error querying the \`html\` field.
This field is intended for use with RSS feed generation.
If you're trying to use it in application-level code, try querying for \`Mdx.body\` instead.
Original error:
${e}`
)
return undefined
}
},
},

When you use it in e.g. your page/template, we already warn about it. But not inside GraphiQL. Adding directly a warning would be really good, but the minimum thing we can do is to add it to the docs for now.

Sidenote: With #35650 this might already change again, but that shouldn't be a concern for now.

@Luchanso
Copy link

Solution: change html on body 👇

query MyQuery {
  mdx {
-    html
+    body
  }
}

And using it in code:

import { MDXRenderer } from "gatsby-plugin-mdx";

... some code ...

<MDXRenderer>{data.body}</MDXRenderer>

@lizzieshipwreck
Copy link

Would it be possible to add a note about this to the official Gatsby tutorial? I just ran into this while going through it for the first time.

@nodebotanist
Copy link
Contributor

I'll take a look at the docs for this this week and get in a PR.

@nodebotanist
Copy link
Contributor

Looking at updating https://www.gatsbyjs.com/docs/mdx/writing-pages/ and maybe https://www.gatsbyjs.com/docs/mdx/getting-started/

@lizzieshipwreck where did you run into this problem (could I get a link?)

@Luchanso
Copy link

@nodebotanist I think it's can be not actual in near future, because MDX plugin will get major update: #25068

@LekoArts
Copy link
Contributor

Hi!

We merged #35650 which means that a new major version of gatsby-plugin-mdx will be released on August 16. You can already try it out by installing gatsby-plugin-mdx@next & gatsby@next.

In this new version there will no longer be a html (and body) field to query for, so this issue is no longer applicable. Hence I'll close it.

@LekoArts LekoArts closed this as not planned Won't fix, can't repro, duplicate, stale Aug 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue Issue that doesn't require previous experience with Gatsby status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. topic: remark/mdx Related to Markdown, remark & MDX ecosystem type: documentation An issue or pull request for improving or updating Gatsby's documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@nodebotanist @Luchanso @notexactlyawe @tyhopp @LekoArts @lizzieshipwreck