-
Notifications
You must be signed in to change notification settings - Fork 101
mdx import returns component not found error #176
Comments
Your file currently contains: import { Bio } from '../../src/components/Bio' but import Bio from '../../src/components/Bio' |
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. |
That's what I got as well when I ran your code, I wasn't able to fix it because I'm unfamiliar with |
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 |
Thanks for your time @ChristopherBiscardi :) I assumed gatsby would support inline scripts like Jekyl did for me, mdx is a total lifesaver 🙏 |
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.
The text was updated successfully, but these errors were encountered: