Gatsby: [gatsby-plugin-mdx] MDXRenderer creates "Unreachable code after return statement" warning in firefox console

[danieltott]

Description

When using MDXRenderer from gatsby-plugin-mdx, firefox throws a warning in Firefox, both in develop and production.

import React from 'react';
import { graphql } from 'gatsby';
import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer';

export default function Post({ data: { mdx } }) {
  return <MDXRenderer>{mdx.body}</MDXRenderer>;
}

export const pageQuery = graphql`
  query($id: String!) {
    mdx(fields: { id: { eq: $id } }) {
      body
    }
  }
`;

This results in the following warning in Firefox console:

unreachable code after return statement

Steps to reproduce

I created this mdx blog starter to reproduce.

It is deployed to netlify where you can see the error, or run it locally:

* `gatsby new gatsby-mdx-blog-starter-project [email protected]:danieltott/gatsby-mdx-blog-starter-project.git`
* `cd gatsby-mdx-blog-starter-project`
* `gatsby develop`
* In Firefox, visit http://localhost:8000/graphql-book

At this point, If you go to http://localhost:8000/graphql-book, you'll get an error in the console on Firefox (and Firefox Developer Edition) unreachable code after return statement with a link to the MDN docs.

Expected result

I would expect this to run without a warning.

Actual result

I get the warning in firefox.

Environment

gatsby info --clipboard

  System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.8.1 - ~/.nvm/versions/node/v12.8.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.10.2 - ~/.nvm/vers

More info/thoughts

If you console.log the contents of mdx.body, you can clearly see the MDXContent.isMDXComponent = true; statement _after_ return function MDXContent:

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/* @jsx mdx */
var _frontmatter = {
  "slug": "/graphql-book",
  "date": "2018-07-18T13:35:13.234Z",
  "title": "The Road to GraphQL",
  "description": "GraphQL Description ...",
  "categories": ["graphql", "javascript"],
  "keywords": ["graphql", "book"],
  "banner": "./images/banner.jpg"
};

var makeShortcode = function makeShortcode(name) {
  return function MDXDefaultShortcode(props) {
    console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope");
    return mdx("div", props);
  };
};

var Link = makeShortcode("Link");
var layoutProps = {
  _frontmatter: _frontmatter
};
var MDXLayout = "wrapper";
return function MDXContent(_ref) {
  var components = _ref.components,
      props = _objectWithoutProperties(_ref, ["components"]);

  return mdx(MDXLayout, _extends({}, layoutProps, props, {
    components: components,
    mdxType: "MDXLayout"
  }), mdx("p", null, "clipped for brevity."), mdx(Link, {
    to: "https://roadtoreact.com/",
    mdxType: "Link"
  }, "Find out more about it"), mdx("p", null, "clipped for brevity."), mdx("p", null, "clipped for brevity."));
}
;
MDXContent.isMDXComponent = true;

This is originally coming from mdx-js/react, mdx-js creates JSX. Somehow, somewhere, this is getting transformed into regular js.

So, this may belong in a different repo, but I don't have any idea where it would be if it's not here.

[wardpeet]

@danieltott Thanks for creating this issue. This seems indeed odd. I'll let the mdx folks know and see what they say.

[johno]

Thanks for opening up this issue and providing a thorough reproduction! This is an issue with core that we've opened up a PR to address: https://github.com/mdx-js/mdx/pull/1024

Feel free to follow along there!

[mohsenkhanpour]

Hey,
This error still logs into Firefox when using mdx files.

I am using latest version of gatsby and gatsby-plugin-mdx.

To reproduce you can

1. Open some of the starters using gatsby-plugin-mdx with Firefox.
2. Click on one of the blog posts, check the console.
3. You will see : unreachable code after return statement

I checked these two starters:
https://www.gatsbyjs.org/starters/hagnerd/gatsby-starter-blog-mdx/
https://www.gatsbyjs.org/starters/hasura/gatsby-gitbook-starter/

No error logs on Chrome, only Firefox.
Any workaround?

[trulyronak]

Bump to this — this is still breaking pages