Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove layoutProps from transpiled output #742

Closed
johno opened this issue Aug 21, 2019 · 4 comments
Closed

Remove layoutProps from transpiled output #742

johno opened this issue Aug 21, 2019 · 4 comments
Labels
💎 v2 Issues related to v2
Milestone
v2

Comments

@johno
Copy link
Member

johno commented Aug 21, 2019

Since these values are already available in scope since they're exports, we can avoid instantiating the object and passing to MDXLayout.
@johno johno added the 💎 v2 Issues related to v2 label Aug 21, 2019
@johno johno mentioned this issue Sep 10, 2019
Closed
@silvenon
Copy link
Contributor

I would love this! The layoutProps logic seems to prevent .mdx pages in Next.js from exporting any of the data fetching functions because Next.js at some point removes those export statements, but MDX already included them in layoutProps, which causes a ReferenceError 😬

@silvenon
Copy link
Contributor

silvenon commented Apr 12, 2020 •
edited
Loading

For people who stumble upon this and are looking for a quick fix, I wrote a Babel plugin which removes these three functions from layoutProps 😁 This is by no means an "official" workaround, I'm only speaking for myself.

// https://nextjs.org/docs/basic-features/data-fetching
const DATA_FETCH_FNS = ['getStaticPaths', 'getStaticProps', 'getServerProps']

module.exports = () => {
  return {
    visitor: {
      ObjectProperty(path) {
        if (
          DATA_FETCH_FNS.includes(path.node.value.name) &&
          path.findParent(
            (path) =>
              path.isVariableDeclarator() &&
              path.node.id.name === 'layoutProps',
          )
        ) {
          path.remove()
        }
      },
    },
  }
}

Copy this into a file and add it to your Babel configuration:

// babel.config.js
module.exports = {
  presets: [
    'next/babel',
  ],
  plugins: [
    './etc/babel-plugin-nextjs-mdx-patch',
  ],
}

@silvenon silvenon mentioned this issue Apr 17, 2020
Closed
@johno johno mentioned this issue Apr 30, 2020
Closed
25 tasks
@eemeli
Copy link

eemeli commented Jun 17, 2020

I'm using mdx to define pages in Next.js, via its pageExtensions: ['mdx'] option. Currently, I'm setting the page title by including export const title = 'Foo' within a .mdx file, and then using a custom wrapper like this:

import Head from 'next/head';

const Wrapper = ({ children, title }) => (
  <main>
    <Head>
      <title>{title}</title>
    </Head>
    {children}
  </main>
);

This works because the layoutProps are passed to Wrapper as props. If they're removed, is there a different solution that I could use for the same effect?

@johno johno added this to the v2 milestone Jul 22, 2020
johno added a commit that referenced this issue Jul 30, 2020
@johno
Remove layout props in compiled jsx
2b7fc2b 
Closes #742
@johno johno mentioned this issue Jul 30, 2020
Merged
@johno
Copy link
Member Author

johno commented Jul 30, 2020

Closed by #1199 (v2 branch)

@johno johno closed this as completed Jul 30, 2020
johno added a commit that referenced this issue Jul 31, 2020
@johno
Remove layout props in compiled jsx (#1199)
b8bedc9 
Closes #742
@wooorm wooorm mentioned this issue Mar 25, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
💎 v2 Issues related to v2
Milestone
v2
Development

Successfully merging a pull request may close this issue.

Remove layoutProps from compiled output mdx-js/mdx
3 participants
@silvenon @eemeli @johno