Styled components - Transforming const to the configured target environment ("es5") is not supported yet

[iurietarlev]

• mdx-bundler version: 8.0.1
• node version: v14.17.6
• npm version: 6.14.15

Relevant code or config:

export const getSinglePost = async (slug: string) => {
  const { code, frontmatter } = await bundleMDX({
    file: `${POSTS_PATH}/${slug}.mdx`,
    cwd: POSTS_PATH,
    esbuildOptions(options) {
      options.platform = 'node'
      return options
    },
  })

  return {
    frontmatter,
    code,
  }
}

What you did: I use styled-components as the css-in-js library for a projects. I use it inside components that get pulled in by the MDX files as well.

What happened:

However I ran into an issue, where an error gets thrown and crashes the page that pulls in relevant mdx file:

Transforming const to the configured target environment ("es5") is not supported yet.

It gets thrown when a component that uses a styled component is used inside the mdx file.

I use Styled Components in an external component. I imported into my mdx file and the page errored out referencing styled components.

Reproduction: The issue can be reproduced in this bare-bones repo that I created purely for reproduction purposes. Just run yarn install and yarn dev and then access http://localhost:3000/posts/second-post to see the error.

Potential solution:

Through experimentation I found a solution where setting options.target to ['esnext'] or ['es6']. I know that the standard is to transpile everything to es5 usually. Is there anything wrong with using es6 given that most modern browsers now support it?

    esbuildOptions(options) {
      options.platform = 'node'
      options.target = ['es6']
      return options
    },
  })
}

[kettanaito]

I'm experiencing the same error when importing a .tsx file in MDX with mdx-bundler.

[ZakKa89]

Thanks for providing a solution as well, same issue with emotion package