Import with glob pattern Error with Typescript

[muco-rolle]

First of all thank you for this helpful library,

I'm trying to import all blog posts with the glob pattern like this:

import { frontMatter as blogPosts } from './blog/**/*.mdx';

All my mdx files are located in src/pages/blog/...
It works fine, and I'm also recieving the contents but I have this error:

Module '"*.mdx"' has no exported member 'frontMatter'. Did you mean to use 'import frontMatter from "*.mdx"' instead?ts(2614)

Which blocks the build.

I'm using:

typescript: 3.9.3
next: 9.4.1
next-mdx-enhanced: 3.0.0

And next.config.js file:

const readingTime = require('reading-time');
const mdxPrism = require('mdx-prism');
const withMdxEnhanced = require('next-mdx-enhanced');

module.exports = withMdxEnhanced({
    layoutPath: './src/layouts',
    defaultLayout: true,
    remarkPlugins: [
        require('remark-autolink-headings'),
        require('remark-slug'),
        require('remark-code-titles'),
        require('./src/utils/title-style')
    ],

    rehypePlugins: [mdxPrism],
    extendFrontMatter: {
        process: (mdxContent) => ({
            wordCount: mdxContent.split(/\s+/gu).length,
            readingTime: readingTime(mdxContent)
        })
    }
})({
    webpack: (config, { isServer }) => {
        if (isServer) {
            require('./scripts/generate-sitemap');
        }

        return config;
    }
});

[talentlessguy]

You should put a module definition in your site folder root with this:

interface FrontMatter {
  __resourcePath: string;
  // And so on...
}

declare module "*.mdx" {
  let MDXComponent: (props: any) => JSX.Element;
  export default MDXComponent;
  export const frontMatter: FrontMatter[];
}

reference: jescalan/babel-plugin-import-glob-array#7 (comment)

[jescalan]

Thanks for the response @talentlessguy ! This is the correct answer - closing this issue