Fix for next@9.4.0 (#55)

* update dependencies
* fix for next 9.4
* abstract plugin injection function

README.md

@@ -62,8 +62,8 @@ module.exports = withMdxEnhanced({
   rehypePlugins: [],
   extendFrontMatter: {
     process: (mdxContent, frontMatter) => {},
-    phase: 'prebuild|loader|both'
-  }
+    phase: 'prebuild|loader|both',
+  },
 })(/* your normal nextjs config */)
 ```
 
@@ -101,10 +101,10 @@ Array of [rehype plugins](https://mdxjs.com/advanced/plugins#using-remark-and-re
 
 > `object` | optional
 
-| Property  | Type       | Description                                                                                                                                                           |
-| --------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Property  | Type       | Description                                                                                                                                                                                                                  |
+| --------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `process` | `function` | A hook function whose return value will be appended to the processed front matter. This function is given access to the source `.mdx` content as the first parameter and the processed front matter as the second parameter. |
-| `phase`   | `string`   | Used to specify when to run the `process` function. Eligible values are `prebuild`, `loader`, `both`. Defaults to `both` if not specified.                            |
+| `phase`   | `string`   | Used to specify when to run the `process` function. Eligible values are `prebuild`, `loader`, `both`. Defaults to `both` if not specified.                                                                                   |
 
 ### scan
 
@@ -160,7 +160,7 @@ The file extension of the template must be one of configured [pageExtensions](ht
 The template, defined in `layouts/docs-page.jsx`, looks like the following:
 
 ```jsx
-export default frontMatter => {
+export default function Layout(frontMatter) {
   return ({ children: content }) => {
     return (
       <div>
@@ -201,14 +201,14 @@ import Link from 'next/link'
 import { frontMatter as introData } from './docs/intro.mdx'
 import { frontMatter as advancedData } from './docs/advanced.mdx'
 
-export default () => {
+export default function DocsPage() {
   const docsPages = [introData, advancedData]
 
   return (
     <>
       <h1>Docs Index</h1>
       <ul>
-        {docsPages.map(page => (
+        {docsPages.map((page) => (
           <li key={page.__resourcePath}>
             <Link href={formatPath(page.__resourcePath)}>
               <a>{page.title}</a>
@@ -245,14 +245,14 @@ First, the index page imports the destructured and renamed front matter from eac
 Let's examine the code that renders each link:
 
 ```jsx
-export default () => {
+export default function DocsPage() {
   const docsPages = [introData, advancedData]
 
   return (
     <>
       <h1>Docs Index</h1>
       <ul>
-        {docsPages.map(page => (
+        {docsPages.map((page) => (
           <li key={page.__resourcePath}>
             <Link href={formatPath(page.__resourcePath)}>
               <a>{page.title}</a>

__tests__/fixtures/basic/pages/index.jsx

@@ -1,7 +1,7 @@
 import { frontMatter as introData } from './docs/intro.mdx'
 import { frontMatter as advancedData } from './docs/advanced.mdx'
 
-export default () => {
+export default function Page() {
   return (
     <>
       <p>Hello world</p>

__tests__/fixtures/extend-frontmatter-async/pages/index.jsx

@@ -1,7 +1,7 @@
 import { frontMatter as introData } from './docs/intro.mdx'
 import { frontMatter as advancedData } from './docs/advanced.mdx'
 
-export default () => {
+export default function Page() {
   return (
     <>
       <p>Hello world</p>

__tests__/fixtures/extend-frontmatter/pages/index.jsx

@@ -1,7 +1,7 @@
 import { frontMatter as introData } from './docs/intro.mdx'
 import { frontMatter as advancedData } from './docs/advanced.mdx'
 
-export default () => {
+export default function Page() {
   return (
     <>
       <p>Hello world</p>

__tests__/fixtures/file-extensions/pages/index.jsx

@@ -1,7 +1,7 @@
 import { frontMatter as mdExtension } from './test.md'
 import { frontMatter as mdxExtension } from './test.mdx'
 
-export default () => {
+export default function Page() {
   return (
     <>
       <p>

__tests__/fixtures/layout-exports-ssg/layouts/docs-page.jsx

@@ -1,10 +1,10 @@
-import { frontMatter as other} from '../pages/docs/intro.mdx'
+import { frontMatter as other } from '../pages/docs/intro.mdx'
 
 export async function getStaticProps() {
-  return {props: {}}
+  return { props: {} }
 }
 
-export default (frontMatter) => {
+export default function Page(frontMatter) {
   return function docsPageLayout({ children }) {
     return (
       <>
@@ -14,4 +14,4 @@ export default (frontMatter) => {
       </>
     )
   }
-}
+}

__tests__/fixtures/layouts-path/pages/index.jsx

@@ -1,7 +1,7 @@
 import { frontMatter as introData } from './docs/intro.mdx'
 import { frontMatter as advancedData } from './docs/advanced.mdx'
 
-export default () => {
+export default function Page() {
   return (
     <>
       <p>Hello world</p>

__tests__/fixtures/on-content/layouts/docs-page.jsx

@@ -1,4 +1,4 @@
-export default () => {
+export default function Page() {
   return function docsPageLayout({ children }) {
     return <>{children}</>
   }

__tests__/fixtures/on-content/pages/index.jsx

@@ -1 +1,3 @@
-export default () => <p>Hello world</p>
+export default function Page() {
+  return <p>Hello world</p>
+}

__tests__/fixtures/scan-mdx-content/pages/index.jsx

@@ -1,7 +1,7 @@
 import { frontMatter as introData } from './docs/intro.mdx'
 import { frontMatter as advancedData } from './docs/advanced.mdx'
 
-export default () => {
+export default function Page() {
   return (
     <>
       <p>Hello world</p>

__tests__/integration.js

@@ -4,7 +4,7 @@ const rmfr = require('rmfr')
 const nextBuild = require('next/dist/build').default
 const nextExport = require('next/dist/export').default
 const glob = require('glob')
-const execa = require("execa")
+const spawn = require('cross-spawn')
 
 // increase timeout since these are integration tests
 jest.setTimeout(200000)
@@ -40,7 +40,10 @@ test('options.layoutPath and options.defaultLayout', async () => {
 })
 
 test('exports ssg functions from layout', async () => {
-  const layoutSSGExportFixture = path.join(__dirname, 'fixtures/layout-exports-ssg')
+  const layoutSSGExportFixture = path.join(
+    __dirname,
+    'fixtures/layout-exports-ssg'
+  )
   const outPath = await compileNextjs(layoutSSGExportFixture)
   return expectContentMatch(outPath, 'docs/intro.html', /Hello world/)
 })
@@ -54,7 +57,10 @@ describe('options.extendFrontMatter', () => {
   })
 
   it('should work with an async process fn', async () => {
-    const extendFmFixture = path.join(__dirname, 'fixtures/extend-frontmatter-async')
+    const extendFmFixture = path.join(
+      __dirname,
+      'fixtures/extend-frontmatter-async'
+    )
     const outPath = await compileNextjs(extendFmFixture)
     expectContentMatch(outPath, 'index.html', /Hello world/)
     expectContentMatch(outPath, 'docs/intro.html', /ortni\/scod/)
@@ -87,7 +93,7 @@ test('options.onContent', async () => {
     if (err) throw err
     mdxPageCount = files.length
   })
-  const mockCallback = jest.fn(content => console.log(content))
+  const mockCallback = jest.fn((content) => console.log(content))
   const compile = await compileNextjsWithMockFunction(
     onContentFixture,
     'next.config-mock.js',
@@ -101,17 +107,22 @@ afterAll(() => {
   return Promise.all([
     rmfr(path.join(__dirname, 'fixtures/*/out'), { glob: true }),
     rmfr(path.join(__dirname, 'fixtures/*/.mdx-data'), { glob: true }),
-    rmfr(path.join(__dirname, 'fixtures/*/.next'), { glob: true })
+    rmfr(path.join(__dirname, 'fixtures/*/.next'), { glob: true }),
   ])
 })
 
 // Test Utilities
-
 async function compileNextjs(projectPath) {
-  const outPath = path.join(projectPath, 'out')
-  await execa("next", ["build", projectPath], { preferLocal: true, cwd: projectPath })
-  await execa("next", ["export", projectPath], { preferLocal: true, cwd: projectPath })
-  return outPath
+  const nextLocal = path.join(__dirname, '../node_modules/.bin/next')
+  spawn.sync(nextLocal, ['build', projectPath], {
+    stdio: 'inherit',
+    cwd: projectPath,
+  })
+  spawn.sync(nextLocal, ['export', projectPath], {
+    stdio: 'inherit',
+    cwd: projectPath,
+  })
+  return path.join(projectPath, 'out')
 }
 
 function expectContentMatch(outPath, filePath, matcher) {
@@ -129,7 +140,7 @@ function compileNextjsWithMockFunction(
   return nextBuild(projectPath, config(mockFn)).then(() => {
     return nextExport(projectPath, {
       outdir: outPath,
-      silent: true
+      silent: true,
     }).then(() => mockFn)
   })
 }

babelPlugin.js

@@ -20,7 +20,7 @@ module.exports = function nextBabelWrapper(nextConfig, pluginOptions) {
             return
 
           // if there are no "frontMatter" imports, do nothing
-          const frontMatterSpecifier = _path.node.specifiers.find(s =>
+          const frontMatterSpecifier = _path.node.specifiers.find((s) =>
             importsFrontMatter(s)
           )
           if (!frontMatterSpecifier) return
@@ -57,8 +57,8 @@ module.exports = function nextBabelWrapper(nextConfig, pluginOptions) {
             }, [])
           }
           debug(`finish: extracting frontmatter for ${importPath}`)
-        }
-      }
+        },
+      },
     }
   }
 }