Version 2 fails with ‘UNHANDLED REJECTION createNodeId is not a function’

[andrewbranch]

Version 2 fails with ‘UNHANDLED REJECTION createNodeId is not a function’

[Ir1d]

@andrewbranch Sure, the repo is in https://github.com/Ir1d/oi-wiki-ng , but I think I should wait for the new PR in gatsby to be published to NPM and try again.
I'll ping you back if it's not working

[andrewbranch]

Hm, good catch. This is another gatsby-plugin-mdx bug. I’ve opened another PR against them: gatsbyjs/gatsby#21211

[leafac]

Thanks 😃

I read your pull requests and I understand the problem and the solution. Thanks for being so quick.

I’m new to Gatsby, so help me understand something: Do people usually not depend on the gatsby-plugin-mdx loader, preferring to write their own gatsby-node.js instead? Is that why the issue I’m reporting hasn’t been caught before the 2.0 release of gatsby-remark-vscode?

I’m asking because I’m considering moving from Jekyll to Gatsby, and my website is so simple that the loader is all I need. In fact, the loader was the reason I chose gatsby-plugin-mdx instead of gatsby-transformer-remark, which seems to be more popular. Is this an odd choice?

[andrewbranch]

Typically I think people only use the MDX plugin if they need to intersperse custom React components within their Markdown files. Using gatsby-transformer-remark doesn’t require you to do anything custom in gatsby-node.js; you’d just replace the MDX plugin entry in gatsby-config.js with the gatsby-transformer-remark entry.

I’m not sure why this issue didn’t come up earlier, because @janosh is also using MDX and caught the first batch of compatibility issues with the plugin, so I’m really not sure what the difference was between your example repro and his site. 🤔

[leafac]

Thanks for taking the time to educate me 😃

Using gatsby-transformer-remark doesn’t require you to do anything custom in gatsby-node.js; you’d just replace the MDX plugin entry in gatsby-config.js with the gatsby-transformer-remark entry.

It didn’t work for me. Here’s what I tried:

package.json:

{
  "dependencies": {
    "gatsby": "^2.19.12",
    "gatsby-source-filesystem": "^2.1.48",
    "gatsby-transformer-remark": "^2.6.50",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages/`
      }
    },
    `gatsby-transformer-remark`
  ]
};

src/pages/index.md:

# Hello World!

Running:

$ npx gatsby develop

When I visit http://localhost:8000, I get a 404.

But if I change to the following, then it works:

package.json:

{
  "dependencies": {
    "@mdx-js/mdx": "^1.5.5",
    "@mdx-js/react": "^1.5.5",
    "gatsby": "^2.19.12",
    "gatsby-plugin-mdx": "^1.0.70",
    "gatsby-source-filesystem": "^2.1.48",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages/`
      }
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`]
      }
    }
  ]
};

Am I doing something wrong in setting up gatsby-transformer-remark?

In general, gatsby-transformer-remark seems lower level than gatsby-plugin-mdx. It doesn’t have the concept of default layouts, for example. Do you think I can use default layouts with gatsby-transformer-remark without boilerplate in gatsby-node.js?

[janosh]

I’m not sure why this issue didn’t come up earlier, because @janosh is also using MDX and caught the first batch of compatibility issues with the plugin, so I’m really not sure what the difference was between your example repro and his site. 🤔

@andrewbranch The reason it didn't come up for me is that I don't use the webpack loader (nothing against it, just didn't need it). I have no md or mdx files src/pages that are automatically converted into pages.

It didn’t work for me. Here’s what I tried:

@leafac The reason your gatsby-transformer-remark example doesn't work is because as you alluded to, it doesn't automatically create pages for files it finds in src/pages as gatsby-plugin-mdx does.

In fact, the loader was the reason I chose gatsby-plugin-mdx instead of gatsby-transformer-remark, which seems to be more popular.

You're basically at step 4 out of 5 of the Adding Markdown Pages guide. Once you define a page component and use it in gatsby-node.js's createPages API, the 404 error should disappear.

[leafac]

@janosh: That’s what I thought. Thanks for the clarification. My conclusion is that, for simple use cases like those of recent Jekyll converts, gatsby-plugin-mdx is better than gatsby-transformer-remark because it requires less boilerplate.

[andrewbranch]

Thanks @janosh! I wasn’t aware of those extra features of gatsby-plugin-mdx. They don’t seem related to MDX, but they are convenient. I was initially somewhat surprised that @leafac’s repro from the issue description didn’t need a gatsby-node.js, but I just attributed it to my not knowing all Gatsby’s secrets. 😄

[Ir1d]

From my point of view transformer-remark calls remark-parse to parse the .md files. and gatsby-plugin-mdx is a wrap of everything related (including the rehype stuff and react stuff). So I think -mdx is more powerful and choose to use that plugin.

When calling yarn develop I get this msg: Cannot read property 'children' of undefined from the Gather all code fence nodes from Markdown AST part of the script.

Is this related to the -mdx bugs?

My Config file

{
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-copy-linked-files",
            options: {
              // By default, `.md` is specified
              // ignoreFileExtensions: ['.md']
              // These files will not be copied
              ignoreFileExtensions: ['.md']
            }
          },
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              isIconAfterHeader: true,
            }
          },
        ],
        remarkPlugins: [ 
          [require(`gatsby-remark-vscode`), {
            theme: 'Dark+ (default dark)', // Read on for list of included themes. Also accepts object and function forms.
            wrapperClassName: '',   // Additional class put on 'pre' tag. Also accepts function to set the class dynamically.
            injectStyles: true,     // Injects (minimal) additional CSS for layout and scrolling
            extensions: [],         // Extensions to download from the marketplace to provide more languages and themes
            extensionDataDirectory: // Absolute path to the directory where extensions will be downloaded. Defaults to inside node_modules.
              path.resolve('extensions'),
            languageAliases: {},    // Map of custom/unknown language codes to standard/known language codes
            replaceColor: x => x,   // Function allowing replacement of a theme color with another. Useful for replacing hex colors with CSS variables.
            getLineClassName: ({    // Function allowing dynamic setting of additional class names on individual lines
              content,              //   - the string content of the line
              index,                //   - the zero-based index of the line within the code fence
              language,             //   - the language specified for the code fence
              meta                  //   - any options set on the code fence alongside the language (more on this later)
            }) => '',
            logLevel: 'warn'       // Set to 'info' to debug if something looks wrong
          }],
        ],
        rehypePlugins: [
        ],
        extensions: [".mdx", ".md"]
      }

[andrewbranch]

@Ir1d I haven’t seen that one before. Would you be able to share a full repro?

[leafac]

The fix has been merged and released, so I’m closing my issue.

Thank you all.

[andrewbranch]

Thanks again for the detailed report, @leafac! I’ve updating MIGRATING.md to note [email protected].