Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Imported component not loading on .mdx file

See original GitHub issue

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 <mathews.kyle@gmail.com>",
  "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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
jlengstorfcommented, Jan 10, 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!

0reactions
LekoArtscommented, Jan 13, 2020

Awesome. Let’s close this then! 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting MDX
This article goes through several common problems and errors that might occur when using MDX.
Read more >
Importing and Using Components in MDX | GatsbyJS 中文网
Components are imported at the top of your MDX documents—in the same syntax they are imported in JavaScript files—and then added using opening...
Read more >
React components and math expressions in .mdx file are ...
If there are errors, probably you can't use require and so you didn't import the plugins successfully. You have to use import method...
Read more >
MDX and React
To define any custom component within an MDX file, you have to export it: only paragraphs that start with export will be parsed...
Read more >
Advanced Features: Using MDX
The @next/mdx package is configured in the next.config.js file at your projects root ... You can now import a React component directly inside...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

fluid images with srcSetBreakpoints: unnecessary images generated

Next page

localhost:8000 blank page on Chrome! working on incognito and Mozilla