Mdx-deck: @mdx-deck/layouts @mdx-deck/components do not work

[portenez]

Scenario:

Given I am using v3
And I install "@mpx-deck/layouts"
When I import a layout
And I run "npx mdx-deck my-deck.mdx"
Then the build fails

Importing like this:

import { Split } from '@mdx-deck/layouts'

## About

<Split>
  # Hello 
  # Goodbye
</Split>

mdx-deck failing like this

Generating SSR bundle failed

Unexpected token (8:4)

File: ../@mdx-deck/layouts/src/Split.js:8:4

Fixed By: https://github.com/jxnblk/mdx-deck/pull/415

[portenez]

I checked the code (File: ../@mdx-deck/layouts/src/Split.js:8:4), and it's jsx. So, seems like mdx-deck by default is not transpiling jsx under node_modules

[portenez]

Updating the title as both @mdx-deck/layouts and @mdx-deck/components have the same issue.

As a workaround, we could include these in the webpack config. It can be done in gatsby, but I wonder how to access this in mdx-deck.

[portenez]

https://github.com/jxnblk/mdx-deck/blob/master/packages/mdx-deck/gatsby-config.js < looks like this is the problem

[portenez]

https://github.com/jxnblk/mdx-deck/pull/415

⬆️ to add these two packages to the gatsby config

[jxnblk]

Some of the v2 packages were deprecated in v3. You should import directly from mdx-deck in v3 - see https://github.com/jxnblk/mdx-deck/blob/master/MIGRATION.md#updating-to-mdx-deck-v3

[portenez]

Thanks. I'm still struggling to make this work:

I tried doing instead:

import { Split } from 'mdx-deck/layouts'

Things now failing with

Can't resolve 'mdx-deck/layouts' in '/home/user/slides/node_modules/mdx-deck/.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir'

[portenez]

K, finally got it. import { Split } from 'mdx-deck