Theo's Typesafe Cult•2y ago

Error with mdx file webpack parser

I am trying to integrate an MDX files that I want blog articles in. I have a component <ArticleLayout meta={meta} {...props} /> I am using a TailwindUI template as a backbone for the some of the implementation and there it works fine. https://tailwindui.com/templates/spotlight

export default (props) => <ArticleLayout meta={meta} {...props} />

export default (props) => <ArticleLayout meta={meta} {...props} />

I have this export in order to render the page like this. But in the end I get the following error:

error - ./src/pages/blog/crafting-a-design-system-for-a-multiplanetary-future/index.mdx
Module parse failed: Unexpected token (13:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| 
> export default (props) => <ArticleLayout meta={meta} {...props} />
| 
| Most companies try to stay ahead of the curve when it comes to visual design, but for Planetaria we needed to create a brand that would still inspire us 100 years from now when humanity has spread across our entire solar system.

Import trace for requested module:
./src/pages/blog/crafting-a-design-system-for-a-multiplanetary-future/index.mdx
./src/pages/blog/ lazy ^\.\/.*$ namespace object
./src/utils/blog/getAllArticles.ts

error - ./src/pages/blog/crafting-a-design-system-for-a-multiplanetary-future/index.mdx
Module parse failed: Unexpected token (13:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| 
> export default (props) => <ArticleLayout meta={meta} {...props} />
| 
| Most companies try to stay ahead of the curve when it comes to visual design, but for Planetaria we needed to create a brand that would still inspire us 100 years from now when humanity has spread across our entire solar system.

Import trace for requested module:
./src/pages/blog/crafting-a-design-system-for-a-multiplanetary-future/index.mdx
./src/pages/blog/ lazy ^\.\/.*$ namespace object
./src/utils/blog/getAllArticles.ts

I am not using webpack and don't even have a webpack config

Spotlight - Tailwind CSS Personal Website Template

We get it — you’ve got a blog post you’re dying to write but you can’t write it until you rebuild your personal site. We’ve got you covered, get back to writing.

2 Replies

Sturlen•2y ago

have you configured next.js to work with mdx? details: https://nextjs.org/docs/advanced-features/using-mdx

Advanced Features: Using MDX | Next.js

Learn how to use @next/mdx in your Next.js project.

Simvolick•2y ago

Thanks that solved it for me

Gaming

Programming

Error with mdx file webpack parser