Pass filename to Babel transform for better errors

https://babeljs.io/docs/en/options#filename

packages/mdx/mdx-hast-to-jsx.js

@@ -121,6 +121,7 @@ MDXContent.isMDXComponent = true`
     // Check JSX nodes against imports
     const babelPluginExtractImportNamesInstance = new BabelPluginExtractImportNames()
     transformSync(importStatements, {
+      filename: options.file.path,
       configFile: false,
       babelrc: false,
       plugins: [
@@ -135,6 +136,7 @@ MDXContent.isMDXComponent = true`
     const babelPluginApplyMdxPropToExportsInstance = new BabelPluginApplyMdxProp()
 
     const fnPostMdxTypeProp = transformSync(fn, {
+      filename: options.file.path,
       configFile: false,
       babelrc: false,
       plugins: [
@@ -145,6 +147,7 @@ MDXContent.isMDXComponent = true`
     }).code
 
     const exportStatementsPostMdxTypeProps = transformSync(exportStatements, {
+      filename: options.file.path,
       configFile: false,
       babelrc: false,
       plugins: [
@@ -250,8 +253,8 @@ export default ${fnPostMdxTypeProp}`
 }
 
 function compile(options = {}) {
-  this.Compiler = function (tree) {
-    return toJSX(tree, {}, options)
+  this.Compiler = function (tree, file) {
+    return toJSX(tree, {}, { file, ...options })
   }
 }
 

packages/mdx/test/index.test.js

@@ -419,3 +419,19 @@ test('Should handle layout props', () => {
     MDXContent.isMDXComponent = true;"
   `)
 })
+
+it('Should include file name in Babel error', async () => {
+  expect(async () => {
+    await mdx(`<br>`, {filepath: '/path/to/file.mdx'})
+  }).rejects.toThrowErrorMatchingInlineSnapshot(`
+    "/path/to/file.mdx: Unterminated JSX contents (8:16)
+
+       6 |       components={components}>
+       7 | <br>
+    >  8 |     </MDXLayout>
+         |                 ^
+       9 |   )
+      10 | };
+      11 | MDXContent.isMDXComponent = true"
+  `)
+})