Prettier throws SyntaxError: Unexpected token in valid MDX function

[dimaMachina]

Prettier 2.7.1
Playground link

--parser mdx

Input:

export const getStaticProps = async () => {
  const pluginsData = await getPackagesData({ packageList: PACKAGES });

  const data = await Promise.all(
    pluginsData.map(async plugin => {
      const [description, content] = await buildMultipleMDX();

      return {
        ...plugin,
        description,
        content,
      };
    })
  );

  return {
    props: {
      ssg: { data },
    },
    revalidate: 60 * 60,
  };
};

Output:

SyntaxError: Unexpected token (2:72)
  1 | export const getStaticProps = async () => {
> 2 |   const pluginsData = await getPackagesData({ packageList: PACKAGES });
    |                                                                        ^

Expected behavior:

[kachkaev]

👋 @B2o5T! I see --parser mdx used for JS code in your playground example. Was this your intent or do you have *.mdx code that is not working? When your snippet is used with --parser babel, there is not parsing error:

Prettier 2.7.1
Playground link

--parser babel

Input:

export const getStaticProps = async () => {
  const pluginsData = await getPackagesData({ packageList: PACKAGES });

  const data = await Promise.all(
    pluginsData.map(async plugin => {
      const [description, content] = await buildMultipleMDX();

      return {
        ...plugin,
        description,
        content,
      };
    })
  );

  return {
    props: {
      ssg: { data },
    },
    revalidate: 60 * 60,
  };
};

Output:

export const getStaticProps = async () => {
  const pluginsData = await getPackagesData({ packageList: PACKAGES });

  const data = await Promise.all(
    pluginsData.map(async (plugin) => {
      const [description, content] = await buildMultipleMDX();

      return {
        ...plugin,
        description,
        content,
      };
    })
  );

  return {
    props: {
      ssg: { data },
    },
    revalidate: 60 * 60,
  };
};

[dimaMachina]

@kachkaev yes I use this code in .mdx file, it's a totally valid code, but prettier breaks my code.

prettier-ignore-start/prettier-ignore-end also doesn't work in mdx2, so I can't ignore this block of code, but there is already PR that fixes the issue #12208 on 1 FEBRUARY! Please give attention to MDX community 😵‍💫

[kachkaev]

My brain’s pattern matching failed me because the example only had export const ... 🤦 😅 You are right though – this should be a valid MDX!

Prettier does not support MDX2 yet – see umbrella issue: #12209. In the meantime, for the code to parse, it is necessary to remove newlines from your JS blocks. I know it’s annoying because the workaround is not intuitive, but at least it works:

Prettier 2.7.1
Playground link

--parser mdx

Input:

export const getStaticProps = async () => {
  const pluginsData = await getPackagesData({ packageList: PACKAGES });
  const data = await Promise.all(
    pluginsData.map(async plugin => {
      const [description, content] = await buildMultipleMDX();
      return {
        ...plugin,
        description,
        content,
      };
    })
  );
  return {
    props: {
      ssg: { data },
    },
    revalidate: 60 * 60,
  };
};	

Output:

export const getStaticProps = async () => {
  const pluginsData = await getPackagesData({ packageList: PACKAGES });
  const data = await Promise.all(
    pluginsData.map(async (plugin) => {
      const [description, content] = await buildMultipleMDX();
      return {
        ...plugin,
        description,
        content,
      };
    })
  );
  return {
    props: {
      ssg: { data },
    },
    revalidate: 60 * 60,
  };
};

[kachkaev]

Closing as duplicate of #5795