Gatsby: Imported component not loading on .mdx file

Created on 16 Dec 2019  Â·  9Comments  Â·  Source: gatsbyjs/gatsby

Description

I am trying to import a component to a blog post using .mdx file.

There are no build errors, just console errors as detailed below.

Steps to reproduce

I started my project using the Gatsby Starter Blog package and then followed the following guide to convert it to use MDX instead of markdown as I want to input some React components into some blog posts. https://dev.to/vsevaseva/how-to-convert-existing-markdown-blog-to-mdx-1ih1. I have made progress by moving the source of the posts into the same root directory as my components src/.

All works fine until I tried to put in my component into the .mdx file and then it produces console errors but no build errors.

My .mdx file looks like this:

---
published: "15th December, 2019"
title: "Unsplash"
excerpt: "Update this"
---
import Unsplash from '../../../components/unsplash'

Content here...

<Unsplash />

And my component looks like:

import React from 'react';
import Unsplash, { toJson } from "unsplash-js";

const unsplash = new Unsplash({
  accessKey: "key",
  secret: "key"
});

export default (props) => {
  return (
    <div>
      Hello world
    </div>
  )
}

Here is my package.json file also if it helps:

{
  "name": "gatsby-starter-blog",
  "private": true,
  "description": "A starter for a blog powered by Gatsby and Markdown",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.5.1",
    "@mdx-js/react": "^1.5.1",
    "@mdx-js/tag": "^0.20.3",
    "gatsby": "^2.18.8",
    "gatsby-image": "^2.2.34",
    "gatsby-plugin-google-analytics": "^2.1.29",
    "gatsby-plugin-manifest": "^2.2.31",
    "gatsby-plugin-mdx": "^1.0.62",
    "gatsby-plugin-offline": "^3.0.27",
    "gatsby-plugin-preact": "^3.1.24",
    "gatsby-plugin-preconnect": "^1.0.5",
    "gatsby-plugin-react-helmet": "^3.1.16",
    "gatsby-plugin-sass": "^2.1.26",
    "gatsby-plugin-sharp": "^2.3.5",
    "gatsby-remark-copy-linked-files": "^2.1.31",
    "gatsby-remark-images": "^3.1.35",
    "gatsby-remark-prismjs": "^3.3.25",
    "gatsby-remark-responsive-iframe": "^2.2.28",
    "gatsby-remark-smartypants": "^2.1.17",
    "gatsby-source-filesystem": "^2.1.40",
    "gatsby-transformer-remark": "^2.6.39",
    "gatsby-transformer-sharp": "^2.3.7",
    "node-sass": "^4.13.0",
    "preact": "^10.1.0",
    "prismjs": "^1.17.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "unsplash-js": "^6.0.0"
  },
  "devDependencies": {
    "eslint-plugin-mdx": "^1.6.3",
    "prettier": "^1.19.1"
  },
  "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "rm -rf .cache/caches/gatsby-plugin-mdx && gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }
}

Expected result

It should render the React component that is being imported into the .mdx file when I visit the post url.

Actual result

It displays a blank page with the following console errors:

[HMR] connected
VM641:35 Uncaught ReferenceError: Unsplash is not defined
    at MDXContent (eval at _construct (construct.js:30), <anonymous>:35:443)
    at renderWithHooks (react-dom.development.js:16259)
    at mountIndeterminateComponent (react-dom.development.js:18793)
    at beginWork$1 (react-dom.development.js:20161)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:441)
    at beginWork$$1 (react-dom.development.js:25779)
    at performUnitOfWork (react-dom.development.js:24694)
    at workLoopSync (react-dom.development.js:24670)
    at performSyncWorkOnRoot (react-dom.development.js:24269)
    at scheduleUpdateOnFiber (react-dom.development.js:23697)
    at updateContainer (react-dom.development.js:27102)
    at react-dom.development.js:27527
    at unbatchedUpdates (react-dom.development.js:24432)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27526)
    at render (react-dom.development.js:27607)
    at app.js:67
MDXContent @ VM641:35
renderWithHooks @ react-dom.development.js:16259
mountIndeterminateComponent @ react-dom.development.js:18793
beginWork$1 @ react-dom.development.js:20161
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
beginWork$$1 @ react-dom.development.js:25779
performUnitOfWork @ react-dom.development.js:24694
workLoopSync @ react-dom.development.js:24670
performSyncWorkOnRoot @ react-dom.development.js:24269
scheduleUpdateOnFiber @ react-dom.development.js:23697
updateContainer @ react-dom.development.js:27102
(anonymous) @ react-dom.development.js:27527
unbatchedUpdates @ react-dom.development.js:24432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:32
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ blog-post.js:38
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793
backend.js:6 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: SideEffect(NullComponent)
r @ backend.js:6
printWarning @ react-dom.development.js:12358
lowPriorityWarningWithoutStack @ react-dom.development.js:12379
./node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:12543
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:25688
commitRootImpl @ react-dom.development.js:24936
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12150
commitRoot @ react-dom.development.js:24921
finishSyncRender @ react-dom.development.js:24328
performSyncWorkOnRoot @ react-dom.development.js:24306
scheduleUpdateOnFiber @ react-dom.development.js:23697
updateContainer @ react-dom.development.js:27102
(anonymous) @ react-dom.development.js:27527
unbatchedUpdates @ react-dom.development.js:24432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:32
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ blog-post.js:38
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793
index.js:2177 The above error occurred in the <MDXContent> component:
    in MDXContent (created by MDXRenderer)
    in MDXRenderer (at blog-post.js:29)
    in article (at blog-post.js:24)
    in section (at blog-post.js:23)
    in main (at layout.js:4)
    in _default (at blog-post.js:14)
    in BlogPostTemplate (created by HotExportedBlogPostTemplate)
    in AppContainer (created by HotExportedBlogPostTemplate)
    in HotExportedBlogPostTemplate (created by PageRenderer)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:64)
    in RouteUpdates (at root.js:63)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:126)
    in MDXProvider (at wrap-root-element.js:65)
    in MDXScopeProvider (at wrap-root-element.js:64)
    in Unknown
    in Unknown (at wrap-root-element.js:72)
    in _default (at app.js:67)

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
logCapturedError @ react-dom.development.js:21842
logError @ react-dom.development.js:21879
callback @ react-dom.development.js:23267
callCallback @ react-dom.development.js:13830
commitUpdateEffects @ react-dom.development.js:13868
commitUpdateQueue @ react-dom.development.js:13858
commitLifeCycles @ react-dom.development.js:22134
commitLayoutEffects @ react-dom.development.js:25343
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
commitRootImpl @ react-dom.development.js:25081
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12150
commitRoot @ react-dom.development.js:24921
finishSyncRender @ react-dom.development.js:24328
performSyncWorkOnRoot @ react-dom.development.js:24306
scheduleUpdateOnFiber @ react-dom.development.js:23697
updateContainer @ react-dom.development.js:27102
(anonymous) @ react-dom.development.js:27527
unbatchedUpdates @ react-dom.development.js:24432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:32
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ blog-post.js:38
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793
index.js:2177 ReferenceError: Unsplash is not defined
    at MDXContent (eval at _construct (construct.js:30), <anonymous>:35:443)
    at renderWithHooks (react-dom.development.js:16259)
    at mountIndeterminateComponent (react-dom.development.js:18793)
    at beginWork$1 (react-dom.development.js:20161)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:441)
    at beginWork$$1 (react-dom.development.js:25779)
    at performUnitOfWork (react-dom.development.js:24694)
    at workLoopSync (react-dom.development.js:24670)
    at performSyncWorkOnRoot (react-dom.development.js:24269)
    at scheduleUpdateOnFiber (react-dom.development.js:23697)
    at updateContainer (react-dom.development.js:27102)
    at react-dom.development.js:27527
    at unbatchedUpdates (react-dom.development.js:24432)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27526)
    at render (react-dom.development.js:27607)
    at app.js:67 "
    in AppContainer (created by HotExportedBlogPostTemplate)
    in HotExportedBlogPostTemplate (created by PageRenderer)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Context.Consumer (created by Location)
    in Location (at root.js:118)
    in Root (at root.js:126)"
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
error @ react-hot-loader.development.js:294
componentDidCatch @ react-hot-loader.development.js:2399
callback @ react-dom.development.js:23272
callCallback @ react-dom.development.js:13830
commitUpdateEffects @ react-dom.development.js:13868
commitUpdateQueue @ react-dom.development.js:13858
commitLifeCycles @ react-dom.development.js:22134
commitLayoutEffects @ react-dom.development.js:25343
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
commitRootImpl @ react-dom.development.js:25081
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12150
commitRoot @ react-dom.development.js:24921
finishSyncRender @ react-dom.development.js:24328
performSyncWorkOnRoot @ react-dom.development.js:24306
scheduleUpdateOnFiber @ react-dom.development.js:23697
updateContainer @ react-dom.development.js:27102
(anonymous) @ react-dom.development.js:27527
unbatchedUpdates @ react-dom.development.js:24432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:32
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ blog-post.js:38
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793
react-hot-loader.development.js:2406 Uncaught ReferenceError: Unsplash is not defined
    at MDXContent (eval at _construct (construct.js:30), <anonymous>:35:443)
    at renderWithHooks (react-dom.development.js:16259)
    at mountIndeterminateComponent (react-dom.development.js:18793)
    at beginWork$1 (react-dom.development.js:20161)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:441)
    at beginWork$$1 (react-dom.development.js:25779)
    at performUnitOfWork (react-dom.development.js:24694)
    at workLoopSync (react-dom.development.js:24670)
    at performSyncWorkOnRoot (react-dom.development.js:24269)
    at scheduleUpdateOnFiber (react-dom.development.js:23697)
    at updateContainer (react-dom.development.js:27102)
    at react-dom.development.js:27527
    at unbatchedUpdates (react-dom.development.js:24432)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27526)
    at render (react-dom.development.js:27607)
    at app.js:67
MDXContent @ VM641:35
renderWithHooks @ react-dom.development.js:16259
mountIndeterminateComponent @ react-dom.development.js:18793
beginWork$1 @ react-dom.development.js:20161
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
beginWork$$1 @ react-dom.development.js:25779
performUnitOfWork @ react-dom.development.js:24694
workLoopSync @ react-dom.development.js:24670
performSyncWorkOnRoot @ react-dom.development.js:24269
scheduleUpdateOnFiber @ react-dom.development.js:23697
updateContainer @ react-dom.development.js:27102
(anonymous) @ react-dom.development.js:27527
unbatchedUpdates @ react-dom.development.js:24432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:32
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ blog-post.js:38
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793
index.js:2177 The above error occurred in the <AppContainer> component:
    in AppContainer (created by HotExportedBlogPostTemplate)
    in HotExportedBlogPostTemplate (created by PageRenderer)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:64)
    in RouteUpdates (at root.js:63)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:126)
    in MDXProvider (at wrap-root-element.js:65)
    in MDXScopeProvider (at wrap-root-element.js:64)
    in Unknown
    in Unknown (at wrap-root-element.js:72)
    in _default (at app.js:67)

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
logCapturedError @ react-dom.development.js:21842
logError @ react-dom.development.js:21879
callback @ react-dom.development.js:23267
callCallback @ react-dom.development.js:13830
commitUpdateEffects @ react-dom.development.js:13868
commitUpdateQueue @ react-dom.development.js:13856
commitLifeCycles @ react-dom.development.js:22134
commitLayoutEffects @ react-dom.development.js:25343
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
commitRootImpl @ react-dom.development.js:25081
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12150
commitRoot @ react-dom.development.js:24921
finishSyncRender @ react-dom.development.js:24328
performSyncWorkOnRoot @ react-dom.development.js:24306
(anonymous) @ react-dom.development.js:12200
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12150
flushSyncCallbackQueueImpl @ react-dom.development.js:12195
flushSyncCallbackQueue @ react-dom.development.js:12183
unbatchedUpdates @ react-dom.development.js:24438
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:32
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ blog-post.js:38
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793
index.js:83 Uncaught ReferenceError: Unsplash is not defined
    at MDXContent (eval at _construct (construct.js:30), <anonymous>:35:443)
    at renderWithHooks (react-dom.development.js:16259)
    at mountIndeterminateComponent (react-dom.development.js:18793)
    at beginWork$1 (react-dom.development.js:20161)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:441)
    at beginWork$$1 (react-dom.development.js:25779)
    at performUnitOfWork (react-dom.development.js:24694)
    at workLoopSync (react-dom.development.js:24670)
    at performSyncWorkOnRoot (react-dom.development.js:24269)
    at scheduleUpdateOnFiber (react-dom.development.js:23697)
    at updateContainer (react-dom.development.js:27102)
    at react-dom.development.js:27527
    at unbatchedUpdates (react-dom.development.js:24432)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27526)
    at render (react-dom.development.js:27607)
    at app.js:67
MDXContent @ VM641:35
renderWithHooks @ react-dom.development.js:16259
mountIndeterminateComponent @ react-dom.development.js:18793
beginWork$1 @ react-dom.development.js:20161
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
beginWork$$1 @ react-dom.development.js:25779
performUnitOfWork @ react-dom.development.js:24694
workLoopSync @ react-dom.development.js:24670
performSyncWorkOnRoot @ react-dom.development.js:24269
scheduleUpdateOnFiber @ react-dom.development.js:23697
updateContainer @ react-dom.development.js:27102
(anonymous) @ react-dom.development.js:27527
unbatchedUpdates @ react-dom.development.js:24432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:32
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ blog-post.js:38
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793
index.js:2177 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:126)
    in MDXProvider (at wrap-root-element.js:65)
    in MDXScopeProvider (at wrap-root-element.js:64)
    in Unknown
    in Unknown (at wrap-root-element.js:72)
    in _default (at app.js:67)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
logCapturedError @ react-dom.development.js:21842
logError @ react-dom.development.js:21879
update.callback @ react-dom.development.js:23231
callCallback @ react-dom.development.js:13830
commitUpdateEffects @ react-dom.development.js:13868
commitUpdateQueue @ react-dom.development.js:13856
commitLifeCycles @ react-dom.development.js:22159
commitLayoutEffects @ react-dom.development.js:25343
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:441
commitRootImpl @ react-dom.development.js:25081
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12150
commitRoot @ react-dom.development.js:24921
finishSyncRender @ react-dom.development.js:24328
performSyncWorkOnRoot @ react-dom.development.js:24306
(anonymous) @ react-dom.development.js:12200
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12150
flushSyncCallbackQueueImpl @ react-dom.development.js:12195
flushSyncCallbackQueue @ react-dom.development.js:12183
unbatchedUpdates @ react-dom.development.js:24438
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:32
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ blog-post.js:38
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793
react-dom.development.js:12213 Uncaught ReferenceError: Unsplash is not defined
    at MDXContent (eval at _construct (construct.js:30), <anonymous>:35:443)
    at renderWithHooks (react-dom.development.js:16259)
    at mountIndeterminateComponent (react-dom.development.js:18793)
    at beginWork$1 (react-dom.development.js:20161)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:441)
    at beginWork$$1 (react-dom.development.js:25779)
    at performUnitOfWork (react-dom.development.js:24694)
    at workLoopSync (react-dom.development.js:24670)
    at performSyncWorkOnRoot (react-dom.development.js:24269)
    at scheduleUpdateOnFiber (react-dom.development.js:23697)
    at updateContainer (react-dom.development.js:27102)
    at react-dom.development.js:27527
    at unbatchedUpdates (react-dom.development.js:24432)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27526)
    at render (react-dom.development.js:27607)
    at app.js:67

Environment

  System:
    OS: macOS 10.15.1
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    npm: 6.13.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.79
    Safari: 13.0.3
  npmPackages:
    gatsby: ^2.18.8 => 2.18.12
    gatsby-image: ^2.2.34 => 2.2.36
    gatsby-plugin-google-analytics: ^2.1.29 => 2.1.31
    gatsby-plugin-manifest: ^2.2.31 => 2.2.33
    gatsby-plugin-mdx: ^1.0.62 => 1.0.62
    gatsby-plugin-offline: ^3.0.27 => 3.0.29
    gatsby-plugin-preact: ^3.1.24 => 3.1.24
    gatsby-plugin-preconnect: ^1.0.5 => 1.0.5
    gatsby-plugin-react-helmet: ^3.1.16 => 3.1.18
    gatsby-plugin-sass: ^2.1.26 => 2.1.26
    gatsby-plugin-sharp: ^2.3.5 => 2.3.7
    gatsby-remark-copy-linked-files: ^2.1.31 => 2.1.33
    gatsby-remark-images: ^3.1.35 => 3.1.38
    gatsby-remark-prismjs: ^3.3.25 => 3.3.27
    gatsby-remark-responsive-iframe: ^2.2.28 => 2.2.30
    gatsby-remark-smartypants: ^2.1.17 => 2.1.19
    gatsby-source-filesystem: ^2.1.40 => 2.1.42
    gatsby-transformer-remark: ^2.6.39 => 2.6.42
    gatsby-transformer-sharp: ^2.3.7 => 2.3.9
  npmGlobalPackages:
    gatsby-cli: 2.8.18
MDX bug
Source
picture thomasbritton
👍2

Most helpful comment

As far as I can tell, this is fixed in the latest release.

https://codesandbox.io/s/relaxed-bhabha-nq8zw

Not sure what happened or when it was fixed, but yay!

picture jlengstorf on 10 Jan 2020
🎉2 ❤1

All 9 comments

React is spitting out an error

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

For your use case, I think it's better to move to pageContext and use unsplash-js api inside gatsby-node.js
https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#pass-context-to-pages

wardpeet picture wardpeet on 16 Dec 2019

I think this is because you're using a relative file path.

Possibly related workaround: https://github.com/ChristopherBiscardi/gatsby-mdx/issues/199

This doesn't feel like a true solution to me, though. Is there any way to use relative file paths inside MDX?

RyanWarner picture RyanWarner on 20 Dec 2019

Relative paths definitely _did_ work at one point — if they don't now, that's a regression. 😱

jlengstorf picture jlengstorf on 20 Dec 2019

Here is a simple reproduction based on the Gatsby mdx starter.

https://qxbem.sse.codesandbox.io/hello-world/

jbolda picture jbolda on 20 Dec 2019

@wardpeet I'm pretty sure that React warning about componentWillMount is caused by React Helmet.

And I'm not to sure if using the pageContext would work for what I want to achieve as the initial idea was to import Unsplash photos into blog posts of which do not sit inside the /pages directory so I'm not sure how I would access the data into a blog post powered by .md or .mdx. It would be great if a simple example could be shown?

@RyanWarner Thanks for that, I have just tried this and unfortunately it doesn't work and I've tried deleting the cache folders etc as suggested on that thread with no luck.

I do remember sometime ago trying .mdx on an old site and had no issues with importing components but it wasn't using Gatsby so this is leading me to think it is an issue with Gatsby somehow over MDX.

thomasbritton picture thomasbritton on 20 Dec 2019

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] picture github-actions[bot] on 10 Jan 2020

As far as I can tell, this is fixed in the latest release.

https://codesandbox.io/s/relaxed-bhabha-nq8zw

Not sure what happened or when it was fixed, but yay!

jlengstorf picture jlengstorf on 10 Jan 2020
🎉2 ❤1

I can confirm that is now working for me as well. This is the PR that I updated and have it working now: https://github.com/jbolda/jacobbolda.com/pull/25

jbolda picture jbolda on 13 Jan 2020

Awesome. Let's close this then! :)

LekoArts picture LekoArts on 13 Jan 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dlindahl picture dlindahl  Â·  81Comments
kripod picture kripod  Â·  74Comments
EdinK1 picture EdinK1  Â·  69Comments
cusspvz picture cusspvz  Â·  128Comments
kuworking picture kuworking  Â·  115Comments