mdx import returns component not found error

[santhoshsoundar]

Import statement returns a "Component not defined" error and the following console error points to the following code block from blog-post.js:
<MDXRenderer scope={this.props.__mdxScope}> {post.code.body} </MDXRenderer>

Please suggest me a workaround while I wait for the official starter, as I see the implementations of @johncmunson 's starter & @silvenon 's site very different from starter edit from commit

Link to my working repo and the mdx file.

[silvenon]

Your file currently contains:

import { Bio } from '../../src/components/Bio'

but Bio.js has a default export, not a named export. Try this:

import Bio from '../../src/components/Bio'

[santhoshsoundar]

Thanks @silvenon , I think my code now isn't locating the component since JSX part is injected into blog-post.js & I am not able to find the relative folder location, I tried both

import Bio from '../../src/components/Bio'          // from content/hello-world/index.mdx

&

import Bio from '../components/Bio'                  // from blog-post.js 

Compile time error:

ERROR  Failed to compile with 1 errors                                                                                                                               
This relative module was not found:

* ../components/Bio in ./.cache/gatsby-mdx/mdx-scopes-dir/5491d574bff3285ac7d9fa5ada64e929.js
✖ ｢wdm｣:
ERROR in ./.cache/gatsby-mdx/mdx-scopes-dir/5491d574bff3285ac7d9fa5ada64e929.js
Module not found: Error: Can't resolve '../components/Bio' in '/Users/Santhosh/GitHub/my-blog/.cache/gatsby-mdx/mdx-scopes-dir'
 @ ./.cache/gatsby-mdx/mdx-scopes-dir/5491d574bff3285ac7d9fa5ada64e929.js 7:0-40 11:7-10
 @ ./.cache/gatsby-mdx/mdx-wrappers-dir/fcebfaab053f4c013da0e21d6d89b462--scope-hash-5491d574bff3285ac7d9fa5ada64e929.js
 @ ./.cache/sync-requires.js
 @ ./.cache/root.js
 @ ./.cache/app.js
 @ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8000/__webpack_hmr&reload=true&overlay=false ./.cache/app

ℹ ｢wdm｣: Failed to compile.

[silvenon]

That's what I got as well when I ran your code, I wasn't able to fix it because I'm unfamiliar with componentWithMDXScope and whether it has some caveats. 😕 I will dive into the source code and see if I can understand it better, maybe Christopher will be able to help too.

[santhoshsoundar]

Thanks a ton @silvenon , I feel the routing is not right with the project and maybe if this starter includes an example to import a component, that would be great., Will wait for a response from Christopher!

[ChristopherBiscardi]

hey @Santhosh114, there were two issues in the repo. The first is that we don't support relative paths in processed MDX content (because relative paths don't make sense if the MDX content comes from a remote CMS like contentful, etc). This is a simple fix that requires an additional bit of webpack config.

// gatsby-node.js
exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
  })
}

and then changing the import to remove the relative path, instead importing directly from the components folder:

import { Bio } from 'components/Bio'

The second is as @silvenon correctly identified. The Bio component had a default export, but the import was looking for a named export.

import Bio from 'components/Bio'

Here's a PR with the changes :) santhoshsoundar/data-viz-blog#1

[santhoshsoundar]

Thanks for your time @ChristopherBiscardi :) I assumed gatsby would support inline scripts like Jekyl did for me, mdx is a total lifesaver 🙏