jxnblk / mdx-deck

♠️ React MDX-based presentation decks
https://mdx-deck.jxnblk.com
MIT License
11.36k stars 603 forks source link

Unable to setup as gatsby theme #414

Open Tstassin opened 5 years ago

Tstassin commented 5 years ago

I followed instructions in your "Usage with Gatsby" docs : I tried it multiple times on fresh installs.

But I'm getting the following error :

ERROR #98123 WEBPACK

Generating SSR bundle failed

Can't` resolve '../../../../src' in '/Users/thomas/dev/codefathers/test/.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir'

File: .cache/caches/gatsby-plugin-mdx/mdx-scopes-dir/82d6c3ded15634149f0de249a884b941.js

portenez commented 5 years ago

I think using this plugin is missing from the instructions: https://www.gatsbyjs.org/docs/add-custom-webpack-config/

ChristopherBiscardi commented 5 years ago

This is likely because you used the example deck.mdx content but didn't install rebass.

import { Box } from 'rebass'

<Box color="tomato">Hello</Box>
Tstassin commented 5 years ago

Thank you for your help, but I'm still struggling, here are my simple steps :

gatsby new website https://github.com/gatsbyjs/gatsby-starter-hello-world && cd website npm i gatsby-theme-mdx-deck

add gatsby-theme-mdx-deck to plugins : module.exports = { plugins: [ 'gatsby-theme-mdx-deck', ] }

create src/decksdirectory and create a basic hello.mdx in it containing : # Hello!

-> No way to navigate to localhost:8000/hello, gatsby gives me a 404, and I still have the basic "hello world" as root page. Is there something I don't understand setting up mdx-deck as a theme ?

Instructions

jxnblk commented 5 years ago

If you'd like a single deck to show at the /hello route, you can add it to the basePath option

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-mdx-deck',
      options: {
        basePath: '/hello',
      }
    },
  ]
}

See https://github.com/jxnblk/mdx-deck/tree/master/packages/gatsby-theme#configuration-options

krubenok commented 5 years ago

Hopping on to this issue, I'm also able to get the MDX Deck root page but am getting 404's when trying to view a deck. When I run my project, Gatsby throws the following errors:

warn The gatsby-theme-mdx-deck plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes - 0.316 s
success building schema - 0.472 s
success createPages - 0.103 s
success createPagesStatefully - 0.039 s
success onPreExtractQueries - 0.024 s
success update schema - 0.058 s
warn The GraphQL query in the non-page component
"/Users/krubenok/Repos/blog/node_modules/gatsby-theme-mdx-deck/src/templates/deck.js" will
not be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — http://graphql.org/learn/queries/#fragments

Seems like Gatsby isn't liking something about the plugin. You can see the details of what's I'm trying here:

https://github.com/krubenok/blog/tree/decks

I've tried the same config in a more basic Gatsby started with no issues, but this starter seems to have issues with it.

alpinegizmo commented 5 years ago

Was stuck here as well for quite a while. Managed to get something working by deleting the essentially empty config files that came with the starter.

Perhaps having those versions of gatsby-node.js, gatsby-browser.js, and gatsby-ssr.js sitting there was shadowing versions supplied by gatsby-theme-mdx-deck?