Skip to content
This repository has been archived by the owner on Nov 3, 2019. It is now read-only.

mdx import returns component not found error #176

Closed
santhoshsoundar opened this issue Oct 13, 2018 · 6 comments
Closed

mdx import returns component not found error #176

santhoshsoundar opened this issue Oct 13, 2018 · 6 comments

Comments

@santhoshsoundar
Copy link

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>

screen shot 2018-10-12 at 4 50 21 pm

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.

@santhoshsoundar santhoshsoundar changed the title import component inside mdx returns not found error import inside mdx returns component not found error Oct 13, 2018
@santhoshsoundar santhoshsoundar changed the title import inside mdx returns component not found error mdx import returns component not found error Oct 13, 2018
@silvenon
Copy link

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
Copy link
Author

santhoshsoundar commented Oct 13, 2018

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
Copy link

silvenon commented Oct 13, 2018

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants